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>