预加载组件

优质

小牛编辑

130浏览

2023-12-01

如果你有内容需要长时间加载，你应该给用户一个加载返回，因此，我们提供数字进度与没有数字进度的进度条。

线性

这里有一组不同类型的线性进度条。

确定进度

<div class="progress">
<div class="determinate" style="width: 70%"></div>
</div>

不确定进度

<div class="progress">
<div class="indeterminate"></div>
</div>

圆形进度

这里有四种颜色和三种尺寸的圆形进度条，这些进度条应该嵌套在 preloader-wrapper 类的div中。默认大小事中等大小，但是你可以增加类 big 或 small 来调整大小。你可以增加类 spinner-red-only、spinner-blue-only、spinner-yellow-only 和 spinner-green-only 来改变颜色。你也可以不使用这些类，通过使用 spinner-layer 并且这将设置 $spinner-default-color 变量的值到我们的 variables.scss 文件中。

颜色

<div class="preloader-wrapper big active">
    <div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
  <div class="circle"></div>
</div><div class="gap-patch">
  <div class="circle"></div>
</div><div class="circle-clipper right">
  <div class="circle"></div>
</div>
    </div>
  </div>

  <div class="preloader-wrapper active">
    <div class="spinner-layer spinner-red-only">
<div class="circle-clipper left">
  <div class="circle"></div>
</div><div class="gap-patch">
  <div class="circle"></div>
</div><div class="circle-clipper right">
  <div class="circle"></div>
</div>
    </div>
  </div>

  <div class="preloader-wrapper small active">
    <div class="spinner-layer spinner-green-only">
<div class="circle-clipper left">
  <div class="circle"></div>
</div><div class="gap-patch">
  <div class="circle"></div>
</div><div class="circle-clipper right">
  <div class="circle"></div>
</div>
    </div>
  </div>

圆形闪动色彩

<div class="preloader-wrapper big active">
<div class="spinner-layer spinner-blue">
  <div class="circle-clipper left">
    <div class="circle"></div>
  </div><div class="gap-patch">
    <div class="circle"></div>
  </div><div class="circle-clipper right">
    <div class="circle"></div>
  </div>
</div>

<div class="spinner-layer spinner-red">
  <div class="circle-clipper left">
    <div class="circle"></div>
  </div><div class="gap-patch">
    <div class="circle"></div>
  </div><div class="circle-clipper right">
    <div class="circle"></div>
  </div>
</div>

<div class="spinner-layer spinner-yellow">
  <div class="circle-clipper left">
    <div class="circle"></div>
  </div><div class="gap-patch">
    <div class="circle"></div>
  </div><div class="circle-clipper right">
    <div class="circle"></div>
  </div>
</div>

<div class="spinner-layer spinner-green">
  <div class="circle-clipper left">
    <div class="circle"></div>
  </div><div class="gap-patch">
    <div class="circle"></div>
  </div><div class="circle-clipper right">
    <div class="circle"></div>
  </div>
</div>
    </div>