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:

    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:

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

    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
    • 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.
    1. <div class="block-title">Determinate Progress Bar</div>
    2.   <p>Inline determinate progress bar:</p>
    3.   <div>
    4.     <p><span data-progress="10" class="progressbar" id="demo-inline-progressbar"></span></p>
    5.     <p class="segmented segmented-raised">
    6.       <a href="#" data-progress="10" class="button set-inline-progress">10%</a>
    7.       <a href="#" data-progress="30" class="button set-inline-progress">30%</a>
    8.       <a href="#" data-progress="50" class="button set-inline-progress">50%</a>
    9.       <a href="#" data-progress="100" class="button set-inline-progress">100%</a>
    10.     </p>
    11.   </div>
    12.   <div>
    14.     <p id="demo-determinate-container"></p>
    15.     <p>
    16.       <a href="#" class="button button-raised show-determinate">Start Loading</a>
    17.     </p>
    18.   </div>
    19.   <div>
    20.     <p>Overlay with determinate progress bar on top of the app:</p>
    21.     <p>
    22.       <a href="#" class="button button-raised show-determinate-root">Start Loading</a>
    23.     </p>
    24. </div>
    1. <div class="block-title">Colors</div>
    2. <div class="list simple-list">
    3.   <ul>
    4.     <li>
    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. </div>