Language: ENCN

Preloader

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

If you look for a Modal (popup) preloader/indicator look in the Modals section: Modal Preloader, Modal Indicator.

By default, Preloader available in two colors: the default is for a light background and another one for dark background. The HTML is pretty easy, just create any element (for example <span>) with "preloader" class:

<body>
  ...
  <div class="page-content">
    <div class="content-block row">
 
      <!-- Default preloader -->
      <div class="col-25">
        Default<br>
        <span class="preloader"></span>
      </div>
 
      <!-- White preloader, additional "preloader-white" class -->
      <div class="col-25 col-dark">
        White<br>
        <span class="preloader preloader-white"></span>
      </div>
 
      <!-- Default with custom size -->
      <div class="col-25">
        Big<br>
        <span style="width:42px; height:42px" class="preloader"></span>
      </div>
 
      <!-- White with custom size -->
      <div class="col-25 col-dark">
        White<br>
        <span style="width:42px; height:42px" class="preloader preloader-white"></span>
      </div>
    </div>
 
    <div class="content-block row">
 
      <!-- Red -->
      <div class="col-25">
        Red<br>
        <span class="preloader preloader-red"></span>
      </div>
 
      <!-- Blue -->
      <div class="col-25">
        Blue<br>
        <span class="preloader preloader-blue"></span>
      </div>
 
      <!-- Yellow -->
      <div class="col-25">
        Yellow<br>
        <span class="preloader preloader-yellow"></span>
      </div>
 
      <!-- Green -->
      <div class="col-25">
        Green<br>
        <span class="preloader preloader-green"></span>
      </div>
 
    </div>
 
  </div>
  ...
  <style>
    .col-25 {
      padding:5px;
      text-align:center;
    }
    .col-dark {
      background:#222;
    }
  </style>
</body>