Progressbar Vue Component

Progressbar Vue component represents Progressbar element.

Progressbar Components

There are following components included:

• f7-progressbar

Progressbar Properties

Progressbar Methods

Examples

1. <template>
2. <f7-page>
3. <f7-navbar title="Progress Bar"></f7-navbar>

5. <f7-block-title>Determinate Progress Bar</f7-block-title>
6. <f7-block strong>
7. <p>When progress bar is determinate it indicates how long an operation will take when the percentage complete is detectable.</p>
8. <p>Inline determinate progress bar:</p>
9. <div>
10. <p><f7-progressbar :progress="10" id="demo-inline-progressbar"></f7-progressbar></p>
11. <f7-segmented raised>
12. <f7-button @click="setInlineProgress(10)">10%</f7-button>
13. <f7-button @click="setInlineProgress(30)">30%</f7-button>
14. <f7-button @click="setInlineProgress(50)">50%</f7-button>
15. <f7-button @click="setInlineProgress(100)">100%</f7-button>
16. </f7-segmented>
17. </div>
18. <div>
19. <p>Inline determinate load & hide:</p>
20. <p id="demo-determinate-container"></p>
21. <p>
22. <f7-button raised @click="showDeterminate(true)">Start Loading</f7-button>
23. </p>
24. </div>
25. <div>
26. <p>Overlay with determinate progress bar on top of the app:</p>
27. <p>
28. <f7-button raised @click="showDeterminate(false)">Start Loading</f7-button>
29. </p>
30. </div>
31. </f7-block>
32. <f7-block-title>Infinite Progress Bar</f7-block-title>
33. <f7-block strong>
34. <p>When progress bar is infinite/indeterminate it requests that the user wait while something finishes when it’s not necessary to indicate how long it will take.</p>
35. <p>Inline infinite progress bar</p>
36. <p>
37. <f7-progressbar infinite></f7-progressbar>
38. </p>
39. <p>Multi-color infinite progress bar</p>
40. <p>
41. <f7-progressbar infinite color="multi"></f7-progressbar>
42. </p>
43. <div>
44. <p>Overlay with infinite progress bar on top of the app</p>
45. <p id="demo-infinite-container"></p>
46. <p>
47. <f7-button raised @click="showInfinite(false)">Start Loading</f7-button>
48. </p>
49. </div>
50. <div>
51. <p>Overlay with infinite multi-color progress bar on top of the app</p>
52. <p>
53. <f7-button raised @click="showInfinite(true)">Start Loading</f7-button>
54. </p>
55. </div>
56. </f7-block>
57. <f7-block-title>Colors</f7-block-title>
58. <div class="list simple-list">
59. <ul>
60. <li>
61. <f7-progressbar color="blue" :progress="10"></f7-progressbar>
62. </li>
63. <li>
64. <f7-progressbar color="red" :progress="20"></f7-progressbar>
65. </li>
66. <li>
67. <f7-progressbar color="pink" :progress="30"></f7-progressbar>
68. </li>
69. <li>
70. <f7-progressbar color="green" :progress="80"></f7-progressbar>
71. </li>
72. <li>
73. <f7-progressbar color="yellow" :progress="90"></f7-progressbar>
74. </li>
75. <li>
76. <f7-progressbar color="orange" :progress="100"></f7-progressbar>
77. </li>
78. </ul>
79. </div>
80. </f7-page>
81. </template>
82. <script>
83. export default {
84. methods: {
85. setInlineProgress(value) {
86. const self = this;
87. const app = self.$f7;
88. app.progressbar.set('#demo-inline-progressbar', value);
89. },
90. showDeterminate(inline) {
91. const self = this;
92. const app = self.$f7;
93. if (self.determinateLoading) return;
94. self.determinateLoading = true;
95. let progressBarEl;
96. if (inline) {
97. progressBarEl = app.progressbar.show('#demo-determinate-container', 0);
98. } else {
99. progressBarEl = app.progressbar.show(0, app.theme === 'md' ? 'yellow' : 'blue');
100. }
101. let progress = 0;
102. function simulateLoading() {
103. setTimeout(() => {
104. const progressBefore = progress;
105. progress += Math.random() * 20;
106. app.progressbar.set(progressBarEl, progress);
107. if (progressBefore < 100) {
108. simulateLoading(); // keep "loading"
109. } else {
110. self.determinateLoading = false;
111. app.progressbar.hide(progressBarEl); // hide
112. }
113. }, Math.random() * 200 + 200);
114. }
115. simulateLoading();
116. },
117. showInfinite(multiColor) {
118. const self = this;
119. const app = self.$f7;
120. if (self.infiniteLoading) return;
121. self.infiniteLoading = true;
122. if (multiColor) {
123. app.progressbar.show('multi');
124. } else {
125. app.progressbar.show(app.theme === 'md' ? 'yellow' : 'blue');
126. }
127. setTimeout(() => {
128. self.infiniteLoading = false;
129. app.progressbar.hide();
130. }, 3000);
131. },
132. },
133. };
134. </script>

← Preloader

Radio →