Progressbar Svelte Component

Progressbar Svelte component represents Progressbar element.

Progressbar Components

There are following components included:

• Progressbar

Progressbar Properties

Progressbar Methods

Examples

1. <Page>
2. <Navbar title="Progress Bar"></Navbar>
3. <Block>
4. <p>In addition to <a href="/preloader/">Preloader</a>, Framework7 also comes with fancy animated determinate and infinite/indeterminate progress bars to indicate some activity.</p>
5. </Block>
6. <BlockTitle>Determinate Progress Bar</BlockTitle>
7. <Block strong>
8. <p>When progress bar is determinate it indicates how long an operation will take when the percentage complete is detectable.</p>
9. <p>Inline determinate progress bar:</p>
10. <div>
11. <p><Progressbar progress={10} id="demo-inline-progressbar"></Progressbar></p>
12. <Segmented raised>
13. <Button onClick={()=>{setInlineProgress(10)}}>10%</Button>
14. <Button onClick={()=>{setInlineProgress(30)}}>30%</Button>
15. <Button onClick={()=>{setInlineProgress(50)}}>50%</Button>
16. <Button onClick={()=>{setInlineProgress(100)}}>100%</Button>
17. </Segmented>
18. </div>
19. <div>
20. <p>Inline determinate load & hide:</p>
21. <p id="demo-determinate-container"></p>
22. <p>
23. <Button raised onClick={()=>{showDeterminate(true)}}>Start Loading</Button>
24. </p>
25. </div>
26. <div>
27. <p>Overlay with determinate progress bar on top of the app:</p>
28. <p>
29. <Button raised onClick={()=>{showDeterminate(false)}}>Start Loading</Button>
30. </p>
31. </div>
32. </Block>
33. <BlockTitle>Infinite Progress Bar</BlockTitle>
34. <Block strong>
35. <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>
36. <p>Inline infinite progress bar</p>
37. <p>
38. <Progressbar infinite></Progressbar>
39. </p>
40. <p>Multi-color infinite progress bar</p>
41. <p>
42. <Progressbar infinite color="multi"></Progressbar>
43. </p>
44. <div>
45. <p>Overlay with infinite progress bar on top of the app</p>
46. <p id="demo-infinite-container"></p>
47. <p>
48. <Button raised onClick={()=>{showInfinite(false)}}>Start Loading</Button>
49. </p>
50. </div>
51. <div>
52. <p>Overlay with infinite multi-color progress bar on top of the app</p>
53. <p>
54. <Button raised onClick={()=>{showInfinite(true)}}>Start Loading</Button>
55. </p>
56. </div>
57. </Block>
58. <BlockTitle>Colors</BlockTitle>
59. <List simpleList>
60. <ListItem>
61. <Progressbar color="blue" progress={10}></Progressbar>
62. </ListItem>
63. <ListItem>
64. <Progressbar color="red" progress={20}></Progressbar>
65. </ListItem>
66. <ListItem>
67. <Progressbar color="pink" progress={30}></Progressbar>
68. </ListItem>
69. <ListItem>
70. <Progressbar color="green" progress={80}></Progressbar>
71. </ListItem>
72. <ListItem>
73. <Progressbar color="yellow" progress={90}></Progressbar>
74. </ListItem>
75. <ListItem>
76. <Progressbar color="orange" progress={100}></Progressbar>
77. </ListItem>
78. </List>
79. </Page>

82. <script>
83. import {f7, Page, Navbar, Block, BlockTitle, Progressbar, Segmented, Button, List, ListItem} from 'framework7-svelte';

85. let determinateLoading = false;
86. let infiniteLoading = false;

88. function setInlineProgress(value) {
89. f7.progressbar.set('#demo-inline-progressbar', value);
90. }
91. function showDeterminate(inline) {
92. if (determinateLoading) return;
93. determinateLoading = true;
94. let progressBarEl;
95. if (inline) {
96. progressBarEl = f7.progressbar.show('#demo-determinate-container', 0);
97. } else {
98. progressBarEl = f7.progressbar.show(0, f7.theme === 'md' ? 'yellow' : 'blue');
99. }
100. let progress = 0;
101. function simulateLoading() {
102. setTimeout(() => {
103. const progressBefore = progress;
104. progress += Math.random() * 20;
105. f7.progressbar.set(progressBarEl, progress);
106. if (progressBefore < 100) {
107. simulateLoading(); // keep "loading"
108. } else {
109. determinateLoading = false;
110. f7.progressbar.hide(progressBarEl); // hide
111. }
112. }, Math.random() * 200 + 200);
113. }
114. simulateLoading();
115. }
116. function showInfinite(multiColor) {
117. if (infiniteLoading) return;
118. infiniteLoading = true;
119. if (multiColor) {
120. f7.progressbar.show('multi');
121. } else {
122. f7.progressbar.show(f7.theme === 'md' ? 'yellow' : 'blue');
123. }
124. setTimeout(() => {
125. infiniteLoading = false;
126. f7.progressbar.hide();
127. }, 3000);
128. }
129. </script>

← Preloader

Radio →