Get Started
Vue Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List

Preloader / Spinner Vue Component

Preloader / Spinner Vue component represents Preloader element.

Preloader Components

There are following components included:

f7-preloader

Preloader Properties

Prop	Type	Description
<f7-preloader> properties
size	string number	Size of the preloader in px

Examples

<template>
  <f7-page>
    <f7-navbar title="Preloader"></f7-navbar>

    <f7-block-title>Default</f7-block-title>
    <f7-block class="row demo-preloaders align-items-stretch text-align-center">
      <f7-col>
        <f7-preloader></f7-preloader>
      </f7-col>
      <f7-col style="background: #000">
        <f7-preloader color="white"></f7-preloader>
      </f7-col>
      <f7-col>
        <f7-preloader :size="42"></f7-preloader>
      </f7-col>
      <f7-col style="background: #000">
        <f7-preloader :size="42" color="white"></f7-preloader>
      </f7-col>
    </f7-block>

    <f7-block-title>Color Preloaders</f7-block-title>
    <f7-block class="row text-align-center">
      <f7-col>
        <f7-preloader color="red"></f7-preloader>
      </f7-col>
      <f7-col>
        <f7-preloader color="green"></f7-preloader>
      </f7-col>
      <f7-col>
        <f7-preloader color="orange"></f7-preloader>
      </f7-col>
      <f7-col>
        <f7-preloader color="blue"></f7-preloader>
      </f7-col>
    </f7-block>

    <f7-block-title>Multi-color (MD-theme only)</f7-block-title>
    <f7-block class="text-align-center">
      <f7-preloader color="multi"></f7-preloader>
    </f7-block>

    <f7-block-title>Preloader Modals</f7-block-title>
    <f7-block>
      <p>With <b>app.preloader.show()</b> you can show small overlay with preloader indicator.</p>
      <p>
        <a class="button button-raised" @click="openIndicator">Open Small Indicator</a>
      </p>
      <p>With <b>app.dialog.preloader()</b> you can show dialog modal with preloader indicator.</p>
      <p>
        <a class="button button-raised" @click="openDialog">Open Dialog Preloader</a>
      </p>
      <p>With <b>app.dialog.preloader('My text...')</b> you can show dialog preloader modal with custom title.</p>
      <p>
        <a class="button button-raised" @click="openCustomDialog">Open Dialog Preloader</a>
      </p>
    </f7-block>
  </f7-page>
</template>
<script>
  export default {
    methods: {
      openIndicator() {
        const self = this;
        self.$f7.preloader.show();
        setTimeout(() => {
          self.$f7.preloader.hide();
        }, 2000);
      },
      openDialog() {
        const self = this;
        self.$f7.dialog.preloader();
        setTimeout(() => {
          self.$f7.dialog.close();
        }, 2000);
      },
      openCustomDialog() {
        const self = this;
        self.$f7.dialog.preloader('My text...');
        setTimeout(() => {
          self.$f7.dialog.close();
        }, 2000);
      },
    },
  };
</script>