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

← Popup

Progressbar →