加载动画

内容加载时的动画效果。

基本样式

默认的加载动画为两个圆点交错显示，效果如下：

    <div class="loader">
      <i></i>
    </div>

大小由font-size控制，默认的大小为1rem，可使用已定义的.size-尺寸控制，也可自定义。

    <div class="loader size-mini">
      <i></i>
    </div>
    <div class="loader" style="font-size:2rem;">
      <i></i>
    </div>

可通过改变文本色.text-颜色调整圆点的颜色。.loader为左侧圆点颜色，i元素为右侧圆点颜色。

    <div class="loader text-warning">
      <i class="text-dot"></i>
    </div>

三点一线加载动画为三个圆点交错显示，效果如下：

    <div class="loader-dot">
      <i></i>
    </div>

大小由font-size控制，默认的大小为1rem，可使用已定义的.size-尺寸控制，也可自定义。

    <div class="loader-dot size-mini">
      <i></i>
    </div>
    <div class="loader-dot" style="font-size:2rem;">
      <i></i>
    </div>

可通过改变i元素的文本色.text-颜色调整圆点的颜色。

    <div class="loader-dot text-danger">
      <i></i>
    </div>

旋转圆环为转动的圆环动画，效果如下：

    <div class="loader-circle"></div>

大小由font-size控制，默认的大小为1rem，可使用已定义的.size-尺寸控制，也可自定义。

    <div class="loader-circle size-mini"></div>
    <div class="loader-circle" style="font-size:2rem;"></div>

可通过改变文本色.text-颜色调整圆点的颜色。

    <div class="loader-circle text-danger"></div>