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:

This layout will work if you put preloader on a page before its initialization. If you need to add it page later or to use in custom layouts then use full preloader layout. It is different for each theme:

iOS Theme Preloader Layout

  2.   <span class="preloader-inner">
  3.     <span class="preloader-inner-line"></span>
  4.     <span class="preloader-inner-line"></span>
  5.     <span class="preloader-inner-line"></span>
  6.     <span class="preloader-inner-line"></span>
  7.     <span class="preloader-inner-line"></span>
  8.     <span class="preloader-inner-line"></span>
  9.     <span class="preloader-inner-line"></span>
  10.     <span class="preloader-inner-line"></span>
  11.     <span class="preloader-inner-line"></span>
  12.     <span class="preloader-inner-line"></span>
  13.     <span class="preloader-inner-line"></span>
  14.     <span class="preloader-inner-line"></span>
  15.   </span>
  16. </div>

MD Theme Preloader Layout

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

Aurora Theme Preloader Layout

  1. <div class="preloader">
  2.     <span class="preloader-inner-circle"></span>
  3.   </span>
  4. </div>

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

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

  • parameters - color. Preloader color, one of the

app.preloader.hide()- hide Preloader overlay

For example:

  1. var app = new Framework7();
  3. // Show preloader before Ajax request
  4. app.preloader.show();
  6. // Perform Ajax request
  7. app.request.get('someurl.html', function (data) {
  8.   // Hide preloader when Ajax request completed
  9.   app.preloader.hide();
  10. });

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

  1. :root {
  2.   --f7-preloader-modal-padding: 8px;
  3.   --f7-preloader-modal-bg-color: rgba(0, 0, 0, 0.8);
  4. }
  5. .ios {
  6.   --f7-preloader-color: #6c6c6c;
  7.   --f7-preloader-size: 20px;
  8.   --f7-preloader-modal-preloader-size: 34px;
  9.   --f7-preloader-modal-border-radius: 5px;
  10. }
  11. .md {
  12.   --f7-preloader-color: #757575;
  13.   --f7-preloader-size: 32px;
  14.   --f7-preloader-modal-preloader-size: 32px;
  15.   --f7-preloader-modal-border-radius: 4px;
  16. }
  17. .aurora {
  18.   --f7-preloader-color: #757575;
  19.   --f7-preloader-size: 24px;
  20.   --f7-preloader-modal-preloader-size: 24px;
  21.   --f7-preloader-modal-border-radius: 4px;
  22. }
  1. <div class="block block-strong align-items-stretch text-align-center">
  2.   <div class="row text-align-center">
  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">Multi-color (MD-theme only)</div>
  2. <div class="block block-strong text-align-center">
  3.   <div class="preloader color-multi"></div>
  4. </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();