加载指示符（Preloader）

优质

小牛编辑

138浏览

2023-12-01

Framework 7 提供了一个好用的加载指示符。这个加载指示符使用SVG绘制，并使用CSS来进行动画，可以很方便的改变它的大小。

如果你需要的是一个Modal(popup)的加载指示符，请查阅Modal章节：Modal Preloader，Modal Indicator

加载指示符有2个颜色供选择：其中一个颜色是配合亮色背景，另一个颜色配合暗色背景，默认的是亮色背景。使用加载提示符非常简单，创建任意标签并加上”preloader”类。

<body>
  ...
  <div class="page-content">
    <div class="content-block row">
      <!-- 默认加载器 -->
      <div class="col-25">
        Default<br>
        <span class="preloader"></span>
      </div>
      <!-- 白色加载器，另加"preloader-white"类 -->
      <div class="col-25 col-dark">
        White<br>
        <span class="preloader preloader-white"></span>
      </div>
      <!-- 自定义尺寸的默认加载器 -->
      <div class="col-25">
        Big<br>
        <span style="width:42px; height:42px" class="preloader"></span>
      </div>
      <!-- 自定义尺寸的白色加载器 -->
      <div class="col-25 col-dark">
        White<br>
        <span style="width:42px; height:42px" class="preloader preloader-white"></span>
      </div>
    </div>
  </div>
  ...
  <style>
    .col-25 {
      padding:5px;
      text-align:center;
    }
    .col-dark {
      background:#222;
    }
  </style>
</body>