Progressbar React Component

Progressbar React component represents Progressbar element.

Progressbar Components

There are following components included:

• Progressbar / F7Progressbar

Progressbar Properties

Progressbar Methods

Examples

1. export default class extends React.Component {
2. constructor(props) {
3. super(props);

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

← Preloader

Radio →