Preloader / Spinner Vue Component

• Preloader Components
• Preloader Properties
• Examples

Preloader / Spinner Vue component represents Preloader element.

Preloader Components

There are following components included:

• **f7-preloader**

Preloader Properties

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>