Progressbar - 图1

Progressbar Svelte Component

Progressbar Svelte component represents Progressbar element.

Progressbar Components

There are following components included:

  • Progressbar

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. <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>
  80. <script>
  81. import {f7, Page, Navbar, Block, BlockTitle, Progressbar, Segmented, Button, List, ListItem} from 'framework7-svelte';
  82. let determinateLoading = false;
  83. let infiniteLoading = false;
  84. function setInlineProgress(value) {
  85. f7.progressbar.set('#demo-inline-progressbar', value);
  86. }
  87. function showDeterminate(inline) {
  88. if (determinateLoading) return;
  89. determinateLoading = true;
  90. let progressBarEl;
  91. if (inline) {
  92. progressBarEl = f7.progressbar.show('#demo-determinate-container', 0);
  93. } else {
  94. progressBarEl = f7.progressbar.show(0, f7.theme === 'md' ? 'yellow' : 'blue');
  95. }
  96. let progress = 0;
  97. function simulateLoading() {
  98. setTimeout(() => {
  99. const progressBefore = progress;
  100. progress += Math.random() * 20;
  101. f7.progressbar.set(progressBarEl, progress);
  102. if (progressBefore < 100) {
  103. simulateLoading(); // keep "loading"
  104. } else {
  105. determinateLoading = false;
  106. f7.progressbar.hide(progressBarEl); // hide
  107. }
  108. }, Math.random() * 200 + 200);
  109. }
  110. simulateLoading();
  111. }
  112. function showInfinite(multiColor) {
  113. if (infiniteLoading) return;
  114. infiniteLoading = true;
  115. if (multiColor) {
  116. f7.progressbar.show('multi');
  117. } else {
  118. f7.progressbar.show(f7.theme === 'md' ? 'yellow' : 'blue');
  119. }
  120. setTimeout(() => {
  121. infiniteLoading = false;
  122. f7.progressbar.hide();
  123. }, 3000);
  124. }
  125. </script>

← Preloader

Radio →