Preloader

    Framework7 has a nice preloader indicator. Preloader is made with SVG and animated with CSS so it can be easily resized.

    Layout is pretty simple:

    MD theme uses more complex preloader layout as it has more complex animation. Usually if it is inside of page or created withing some API methods F7 will add this additional inner layout automatically. But if you will add it manually using, lets say, direct DOM manipulation then you may need to add full layout which is required for MD theme:

    2. <div class="preloader">
    3.   <span class="preloader-inner">
    4.     <span class="preloader-inner-gap"></span>
    5.     <span class="preloader-inner-left">
    6.         <span class="preloader-inner-half-circle"></span>
    7.     </span>
    8.     <span class="preloader-inner-right">
    9.         <span class="preloader-inner-half-circle"></span>
    10.     </span>
    11.   </span>
    12. </div>

    MD theme also supports special color-multi color to make preloader multi-color.

    1. <!-- Red preloader -->
    2. <div class="preloader color-red"></div>
    4. <!-- Green preloader -->
    5. <div class="preloader color-green"></div>
    7. <!-- Multicolor preloader (MD theme only) -->
    8. <div class="preloader color-multi"></div>

    It is also possible to call special Preloader overlay which is useful if you need to block user actions until something is loaded. This kind of preloader will appear in front of app and block any user actions behind it.

    Let’s look at related app methods to work with Preloader overlay

    app.preloader.hide()- hide Preloader overlay

    For example:

    Opening Preloader overlay will also add with-modal-preloader class to element.

    1. <div class="block block-strong align-items-stretch text-align-center">
    3.     <div class="col-25">
    4.       <div class="preloader"></div>
    5.     </div>
    6.     <div class="col-25" style="background: #222">
    7.       <div class="preloader color-white"></div>
    8.     </div>
    9.     <!-- Large preloaders -->
    10.     <div class="col-25">
    11.       <div class="preloader" style="width: 44px; height: 44px"></div>
    12.     </div>
    13.     <div class="col-25" style="background: #222">
    14.       <div class="preloader color-white" style="width: 44px; height: 44px"></div>
    15.     </div>
    16.   </div>
    17. </div>
    1. <div class="block-title">Color Preloaders</div>
    2. <div class="block block-strong">
    3.   <div class="row">
    4.     <div class="col-25">
    5.       <div class="preloader color-red"></div>
    6.     </div>
    7.     <div class="col-25">
    8.       <div class="preloader color-green"></div>
    10.       <div class="preloader color-orange"></div>
    11.     </div>
    12.     <div class="col-25">
    13.       <div class="preloader color-blue"></div>
    14.     </div>
    15.   </div>
    16. </div>
    1. <div class="block-title">Preloader Modals</div>
    2. <div class="block block-strong">
    3.   <p>With <b>app.preloader.show()</b> you can show small overlay with preloader indicator.</p>
    4.   <p>
    5.     <a class="button button-raised open-preloader-indicator">Open Small Indicator</a>
    6.   </p>
    7. </div>
    1. var app = new Framework7();
    3. var $$ = Dom7;
    5. $$('.open-preloader-indicator').on('click', function () {
    6.   app.preloader.show();
    7.   setTimeout(function () {
    8.     app.preloader.hide();
    9.   }, 3000);
    10. });