Progressbar - 图1

Progressbar

In addition to Preloader Framework7 also comes with fancy animated determinate and infinite/indeterminate progressbars to indicate activity.

Determinate Progressbar

When progressbar is determinate it indicates how long an operation will take when the percentage complete is detectable.

Let’s look at layout of determinate progressbar:

  1. <div class="progressbar" data-progress="20">
  2.   <span></span>
  3. </div>

Where data-progress=”20” - current progress (in percents). Note that this data attribute sets progress only on page load. If you need to change it later it should be done via API.

Infinite Progressbar

When progressbar is infinite/indeterminate it requests that the user wait while something finishes when it’s not necessary to indicate how long it will take.

Let’s look at layout of infinite progressbar:

  1. <div class="progressbar-infinite"></div>

Progressbar Colors

Progressbar supports all default colors. So to change its color just add color-[color] class to preloader element.

  1. <!-- Red progressbar -->
  2. <div class="progressbar color-red" data-progress="20">
  3.   <span></span>
  4. </div>
  6. <!-- Green progressbar -->
  7. <div class="progressbar color-green" data-progress="50">
  8.   <span></span>
  9. </div>
  11. <!-- Yellow infinite progressbar -->
  12. <div class="progressbar-infinite color-yellow"></div>
  14. <!-- Multicolor infinite progressbar -->
  15. <div class="progressbar-infinite color-multi"></div>

Progressbar API

Progressbar comes with API that allows you to control Progressbar’s progress, show and hide it. Let’s look on appropriate App’s properties and methods:

app.progressbar.set(el, progress, duration) - set progress for Determinate Progressbar.

  • el - string or HTMLElement. Progressbar element or element containing progressbar element. If string - CSS selector of such element.
  • progress - number. Progress in percents (from 0 to 100)
  • speed - number. Transition duration of progress change animation (in ms)
  • This method returns Progressbar HTMLElement

app.progressbar.set(progress, duration) - set progress for Determinate Progressbar which is under the app root element.

  • progress - number. Progress in percents (from 0 to 100)
  • speed - number. Transition duration of progress change animation (in ms)
  • This method returns Progressbar HTMLElement

app.progressbar.show(el, progress, color) - create and show or just show (if already presented) progressbar.

  • el - string or HTMLElement. Progressbar element container or element containing progressbar element. If string - CSS selector of such element. Optional
  • progress - number. Progress in percents (from 0 to 100). Optional
  • color - string. Color of progressbar, for example “white”, “red”, etc. from available color themes. Optional
  • This method returns Progressbar HTMLElement

All arguments here are optional:

  • If you omit el argument, it will look for (or create) progressbar element under app root
  • If you omit progress, it will show/create infinite progressbar
  • If you omit all arguments, then it will show/create infinite progressbar under the app root with default color

app.progressbar.hide(el) - hide Progressbar.

  • el - string or HTMLElement. Progressbar element container or element containing progressbar element. If string - CSS selector of such element. If not specified then it will look for such element under the app root element.

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

  1. :root {
  2.   /*
  3.   --f7-progressbar-progress-color: var(--f7-theme-color);
  4.   */
  5. }
  6. .ios {
  7.   --f7-progressbar-bg-color: #b6b6b6;
  8.   --f7-progressbar-height: 2px;
  9.   --f7-progressbar-border-radius: 2px;
  10. }
  11. .md {
  12.   /*
  13.   --f7-progressbar-bg-color: rgba(var(--f7-theme-color-rgb), 0.5);
  14.   */
  15.   --f7-progressbar-height: 4px;
  16.   --f7-progressbar-border-radius: 0px;
  17. }
  18. .aurora {
  19.   --f7-progressbar-bg-color: #dbdbdb;
  20.   --f7-progressbar-height: 6px;
  21.   --f7-progressbar-border-radius: 3px;
  22. }
  23. .aurora .theme-dark,
  24. .aurora.theme-dark {
  25.   --f7-progressbar-bg-color: #444;
  26. }

Examples

  1. <div class="block-title">Determinate Progress Bar</div>
  2. <div class="block block-strong">
  3.   <p>Inline determinate progress bar:</p>
  4.   <div>
  5.     <p><span data-progress="10" class="progressbar" id="demo-inline-progressbar"></span></p>
  6.     <p class="segmented segmented-raised">
  7.       <a href="#" data-progress="10" class="button set-inline-progress">10%</a>
  8.       <a href="#" data-progress="30" class="button set-inline-progress">30%</a>
  9.       <a href="#" data-progress="50" class="button set-inline-progress">50%</a>
  10.       <a href="#" data-progress="100" class="button set-inline-progress">100%</a>
  11.     </p>
  12.   </div>
  13.   <div>
  14.     <p>Inline determinate load & hide:</p>
  15.     <p id="demo-determinate-container"></p>
  16.     <p>
  17.       <a href="#" class="button button-raised show-determinate">Start Loading</a>
  18.     </p>
  19.   </div>
  20.   <div>
  21.     <p>Overlay with determinate progress bar on top of the app:</p>
  22.     <p>
  23.       <a href="#" class="button button-raised show-determinate-root">Start Loading</a>
  24.     </p>
  25.   </div>
  26. </div>
  1. <div class="block-title">Infinite Progress Bar</div>
  2. <div class="block block-strong">
  3.   <p>Inline infinite progress bar</p>
  4.   <p>
  5.     <span class="progressbar-infinite"></span>
  6.   </p>
  7.   <p>Multi-color infinite progress bar</p>
  8.   <p>
  9.     <span class="progressbar-infinite color-multi"></span>
  10.   </p>
  11.   <div>
  12.     <p>Overlay with infinite progress bar on top of the app</p>
  13.     <p id="demo-infinite-container"></p>
  14.     <p>
  15.       <a href="#" class="button button-raised show-infinite">Start Loading</a>
  16.     </p>
  17.   </div>
  18.   <div>
  19.     <p>Overlay with infinite multi-color progress bar on top of the app</p>
  20.     <p>
  21.       <a href="#" class="button button-raised show-infinite-root">Start Loading</a>
  22.     </p>
  23.   </div>
  24. </div>
  1. <div class="block-title">Colors</div>
  2. <div class="list simple-list">
  3.   <ul>
  4.     <li>
  5.       <div class="progressbar color-blue" data-progress="10"></div>
  6.     </li>
  7.     <li>
  8.       <div class="progressbar color-red" data-progress="20"></div>
  9.     </li>
  10.     <li>
  11.       <div class="progressbar color-pink" data-progress="30"></div>
  12.     </li>
  13.     <li>
  14.       <div class="progressbar color-green" data-progress="80"></div>
  15.     </li>
  16.     <li>
  17.       <div class="progressbar color-yellow" data-progress="90"></div>
  18.     </li>
  19.     <li>
  20.       <div class="progressbar color-orange" data-progress="100"></div>
  21.     </li>
  22.   </ul>
  23. </div>
  1. var app = new Framework7();
  3. var $$ = Dom7;
  5. // Set progress on inline progressbar
  6. $$('.set-inline-progress').on('click', function (e) {
  7.   var progress = $$(this).attr('data-progress');
  8.   app.progressbar.set('#demo-inline-progressbar', progress);
  9. });
  12. // Function show determinate progressbar and emulate loading
  13. determinateLoading = false;
  14. function showDeterminate(inline) {
  15.   determinateLoading = true;
  16.   var progressBarEl;
  17.   if (inline) {
  18.     // inline progressbar
  19.     progressBarEl = app.progressbar.show('#demo-determinate-container', 0);
  20.   } else {
  21.     // root progressbar
  22.     progressBarEl = app.progressbar.show(0, app.theme === 'md' ? 'yellow' : 'blue');
  23.   }
  24.   var progress = 0;
  25.   function simulateLoading() {
  26.     setTimeout(function () {
  27.       var progressBefore = progress;
  28.       progress += Math.random() * 20;
  29.       app.progressbar.set(progressBarEl, progress);
  30.       if (progressBefore < 100) {
  31.         simulateLoading(); //keep "loading"
  32.       }
  33.       else {
  34.         determinateLoading = false;
  35.         app.progressbar.hide(progressBarEl); //hide
  36.       }
  37.     }, Math.random() * 200 + 200);
  38.   }
  39.   simulateLoading();
  40. }
  41. // show inline determinate progressbar
  42. $$('.show-determinate').on('click', function (e) {
  43.   showDeterminate(true);
  44. });
  46. // show root determinate progressbar
  47. $$('.show-determinate-root').on('click', function (e) {
  48.   showDeterminate(false);
  49. });
  51. var infiniteLoading = false;
  52. // show inline infinite progressbar
  53. $$('.show-infinite').on('click', function () {
  54.   app.progressbar.show(app.theme === 'md' ? 'yellow' : 'blue');
  55.   setTimeout(function () {
  56.     infiniteLoading = false;
  57.     app.progressbar.hide();
  58.   }, 3000);
  59. });
  61. // show root infinite progressbar
  62. $$('.show-infinite-root').on('click', function () {
  63.   app.progressbar.show('multi');
  64.   setTimeout(function () {
  65.     infiniteLoading = false;
  66.     app.progressbar.hide();
  67.   }, 3000);
  68. });