Progressbar

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

    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:

    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

    Let’s look at layout of infinite progressbar:

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

    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
    • 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.

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

    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. }

    Examples

    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>
    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. 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.   }
    23.   var progress = 0;
    24.   function simulateLoading() {
    25.     setTimeout(function () {
    27.       progress += Math.random() * 20;
    28.       app.progressbar.set(progressBarEl, progress);
    29.       if (progressBefore < 100) {
    30.         simulateLoading(); //keep "loading"
    31.       }
    32.       else {
    33.         determinateLoading = false;
    34.         app.progressbar.hide(progressBarEl); //hide
    35.       }
    36.     }, Math.random() * 200 + 200);
    37.   }
    38.   simulateLoading();
    39. }
    40. // show inline determinate progressbar
    41. $$('.show-determinate').on('click', function (e) {
    42.   showDeterminate(true);
    43. });
    45. // show root determinate progressbar
    46. $$('.show-determinate-root').on('click', function (e) {
    47.   showDeterminate(false);
    48. });
    50. var infiniteLoading = false;
    51. // show inline infinite progressbar
    52. $$('.show-infinite').on('click', function () {
    53.   app.progressbar.show(app.theme === 'md' ? 'yellow' : 'blue');
    54.   setTimeout(function () {
    55.     infiniteLoading = false;
    56.     app.progressbar.hide();
    57.   }, 3000);
    58. });
    60. // show root infinite progressbar
    61. $$('.show-infinite-root').on('click', function () {
    62.   app.progressbar.show('multi');
    63.   setTimeout(function () {
    64.     infiniteLoading = false;
    65.     app.progressbar.hide();
    67. });