Progressbar - 图1

Progressbar React Component

Progressbar React component represents Progressbar element.

Progressbar Components

There are following components included:

  • Progressbar / F7Progressbar

Progressbar Properties

PropTypeDescription
<Progressbar> properties
progressnumberDeterminate progress (from 0 to 100)
infinitebooleanWhether progressbar is infinite or not (determinate)

Progressbar Methods

<Progressbar> methods
.set(progress, duration)Set progressbar progress

Examples

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

← Preloader

Radio →