Preloader - 图1

Preloader / Spinner Vue Component

Preloader / Spinner Vue component represents Preloader element.

Preloader Components

There are following components included:

  • f7-preloader

Preloader Properties

PropTypeDescription
<f7-preloader> properties
sizestring
number		Size of the preloader in px

Examples

  1. <template>
  2.   <f7-page>
  3.     <f7-navbar title="Preloader"></f7-navbar>
  5.     <f7-block-title>Default</f7-block-title>
  6.     <f7-block class="row demo-preloaders align-items-stretch text-align-center">
  7.       <f7-col>
  8.         <f7-preloader></f7-preloader>
  9.       </f7-col>
  10.       <f7-col style="background: #000">
  11.         <f7-preloader color="white"></f7-preloader>
  12.       </f7-col>
  13.       <f7-col>
  14.         <f7-preloader :size="42"></f7-preloader>
  15.       </f7-col>
  16.       <f7-col style="background: #000">
  17.         <f7-preloader :size="42" color="white"></f7-preloader>
  18.       </f7-col>
  19.     </f7-block>
  21.     <f7-block-title>Color Preloaders</f7-block-title>
  22.     <f7-block class="row text-align-center">
  23.       <f7-col>
  24.         <f7-preloader color="red"></f7-preloader>
  25.       </f7-col>
  26.       <f7-col>
  27.         <f7-preloader color="green"></f7-preloader>
  28.       </f7-col>
  29.       <f7-col>
  30.         <f7-preloader color="orange"></f7-preloader>
  31.       </f7-col>
  32.       <f7-col>
  33.         <f7-preloader color="blue"></f7-preloader>
  34.       </f7-col>
  35.     </f7-block>
  37.     <f7-block-title>Multi-color (MD-theme only)</f7-block-title>
  38.     <f7-block class="text-align-center">
  39.       <f7-preloader color="multi"></f7-preloader>
  40.     </f7-block>
  42.     <f7-block-title>Preloader Modals</f7-block-title>
  43.     <f7-block>
  44.       <p>With <b>app.preloader.show()</b> you can show small overlay with preloader indicator.</p>
  45.       <p>
  46.         <a class="button button-raised" @click="openIndicator">Open Small Indicator</a>
  47.       </p>
  48.       <p>With <b>app.dialog.preloader()</b> you can show dialog modal with preloader indicator.</p>
  49.       <p>
  50.         <a class="button button-raised" @click="openDialog">Open Dialog Preloader</a>
  51.       </p>
  52.       <p>With <b>app.dialog.preloader('My text...')</b> you can show dialog preloader modal with custom title.</p>
  53.       <p>
  54.         <a class="button button-raised" @click="openCustomDialog">Open Dialog Preloader</a>
  55.       </p>
  56.     </f7-block>
  57.   </f7-page>
  58. </template>
  59. <script>
  60.   export default {
  61.     methods: {
  62.       openIndicator() {
  63.         const self = this;
  64.         self.$f7.preloader.show();
  65.         setTimeout(() => {
  66.           self.$f7.preloader.hide();
  67.         }, 2000);
  68.       },
  69.       openDialog() {
  70.         const self = this;
  71.         self.$f7.dialog.preloader();
  72.         setTimeout(() => {
  73.           self.$f7.dialog.close();
  74.         }, 2000);
  75.       },
  76.       openCustomDialog() {
  77.         const self = this;
  78.         self.$f7.dialog.preloader('My text...');
  79.         setTimeout(() => {
  80.           self.$f7.dialog.close();
  81.         }, 2000);
  82.       },
  83.     },
  84.   };
  85. </script>

← Popup

Progressbar →