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:

    <div class="progressbar" data-progress="20">
      <span></span>
    </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:

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

    MD theme also supports special color-multi color for infinite progressbar to make it multi-color.

    <!-- Red progressbar -->
    <div class="progressbar color-red" data-progress="20">
      <span></span>
    </div>
    
    <!-- Green progressbar -->
    <div class="progressbar color-green" data-progress="50">
      <span></span>
    </div>
    
    <!-- Yellow infinite progressbar -->
    <div class="progressbar-infinite color-yellow"></div>
    
    <!-- Multicolor infinite progressbar (MD theme only) -->
    <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

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

    Examples

    <div class="block-title">Determinate Progress Bar</div>
    <div class="block block-strong">
      <p>Inline determinate progress bar:</p>
      <div>
        <p><span data-progress="10" class="progressbar" id="demo-inline-progressbar"></span></p>
        <p class="segmented segmented-raised">
          <a href="#" data-progress="10" class="button set-inline-progress">10%</a>
          <a href="#" data-progress="30" class="button set-inline-progress">30%</a>
          <a href="#" data-progress="50" class="button set-inline-progress">50%</a>
          <a href="#" data-progress="100" class="button set-inline-progress">100%</a>
        </p>
      </div>
      <div>
        <p>Inline determinate load & hide:</p>
        <p id="demo-determinate-container"></p>
        <p>
          <a href="#" class="button button-raised show-determinate">Start Loading</a>
        </p>
      </div>
      <div>
        <p>Overlay with determinate progress bar on top of the app:</p>
        <p>
          <a href="#" class="button button-raised show-determinate-root">Start Loading</a>
        </p>
      </div>
    </div>
    <div class="block-title">Infinite Progress Bar</div>
    <div class="block block-strong">
      <p>Inline infinite progress bar</p>
      <p>
        <span class="progressbar-infinite"></span>
      </p>
      <p>Multi-color infinite progress bar</p>
      <p>
        <span class="progressbar-infinite color-multi"></span>
      </p>
      <div>
        <p>Overlay with infinite progress bar on top of the app</p>
        <p id="demo-infinite-container"></p>
        <p>
          <a href="#" class="button button-raised show-infinite">Start Loading</a>
        </p>
      </div>
      <div>
        <p>Overlay with infinite multi-color progress bar on top of the app</p>
        <p>
          <a href="#" class="button button-raised show-infinite-root">Start Loading</a>
        </p>
      </div>
    </div>
    <div class="block-title">Colors</div>
    <div class="list simple-list">
      <ul>
        <li>
          <div class="progressbar color-blue" data-progress="10"></div>
        </li>
        <li>
          <div class="progressbar color-red" data-progress="20"></div>
        </li>
        <li>
          <div class="progressbar color-pink" data-progress="30"></div>
        </li>
        <li>
          <div class="progressbar color-green" data-progress="80"></div>
        </li>
        <li>
          <div class="progressbar color-yellow" data-progress="90"></div>
        </li>
        <li>
          <div class="progressbar color-orange" data-progress="100"></div>
        </li>
      </ul>
    </div>
    var app = new Framework7();
    
    var $$ = Dom7;
    
    // Set progress on inline progressbar
    $$('.set-inline-progress').on('click', function (e) {
      var progress = $$(this).attr('data-progress');
      app.progressbar.set('#demo-inline-progressbar', progress);
    });
    
    
    // Function show determinate progressbar and emulate loading
    determinateLoading = false;
    function showDeterminate(inline) {
      determinateLoading = true;
      var progressBarEl;
      if (inline) {
        // inline progressbar
        progressBarEl = app.progressbar.show('#demo-determinate-container', 0);
      } else {
        // root progressbar
        progressBarEl = app.progressbar.show(0, app.theme === 'md' ? 'yellow' : 'blue');
      }
      var progress = 0;
      function simulateLoading() {
        setTimeout(function () {
          var progressBefore = progress;
          progress += Math.random() * 20;
          app.progressbar.set(progressBarEl, progress);
          if (progressBefore < 100) {
            simulateLoading(); //keep "loading"
          }
          else {
            determinateLoading = false;
            app.progressbar.hide(progressBarEl); //hide
          }
        }, Math.random() * 200 + 200);
      }
      simulateLoading();
    }
    // show inline determinate progressbar
    $$('.show-determinate').on('click', function (e) {
      showDeterminate(true);
    });
    
    // show root determinate progressbar
    $$('.show-determinate-root').on('click', function (e) {
      showDeterminate(false);
    });
    
    var infiniteLoading = false;
    // show inline infinite progressbar
    $$('.show-infinite').on('click', function () {
      app.progressbar.show(app.theme === 'md' ? 'yellow' : 'blue');
      setTimeout(function () {
        infiniteLoading = false;
        app.progressbar.hide();
      }, 3000);
    });
    
    // show root infinite progressbar
    $$('.show-infinite-root').on('click', function () {
      app.progressbar.show('multi');
      setTimeout(function () {
        infiniteLoading = false;
        app.progressbar.hide();
      }, 3000);
    });