Spin 加载

底部刷新

• 在父级元素中，保持水平居中

• 可自定义加载动画后面的文字

• 多用于页面底部的加载

<se-spin type="local">加载中...</se-spin>

全局加载/页面加载

• 在父级元素中，保持水平、垂直居中

• 多用于整个页面的加载

<div style="height: 70px">
  <se-spin type="global"></se-spin>
</div>

竖线类型

设置颜色时，渐变色请输入一个数组。

<div style="height: 70px">
  <se-spin type="tv"></se-spin>
</div>

自定义颜色

可以通过 color 设置颜色。

<table>
  <tr>
    <td>
      <se-spin :color="['purple']"></se-spin>
    </td>
    <td>
      <div style="height: 70px">
        <se-spin :color="['orange']" type="global"></se-spin>
      </div>
    </td>
    <td>
      <se-spin type="tv" :color="['rgba(30,197,233,1)', 'rgba(20,250,197,1)']"></se-spin>
    </td>
  </tr>
</table>

自定义大小

通过 scale 设置加载动画的缩放值。

<table>
  <tr>
    <td>
      <se-spin :scale=".6"></se-spin>
    </td>
    <td>
      <div style="width: 100px; height: 70px">
        <se-spin :scale=".6" type="global"></se-spin>
      </div>
    </td>
    <td>
      <se-spin :scale=".6" type="tv"></se-spin>
    </td>
  </tr>
  <tr>
    <td>
      <se-spin :scale="2"></se-spin>
    </td>
    <td>
      <div style="width: 100px; height: 70px">
        <se-spin :scale="2" type="global"></se-spin>
      </div>
    </td>
    <td>
      <se-spin :scale="1.5" type="tv"></se-spin>
    </td>
  </tr>
</table>

<style>
  td {
    padding: 20px 50px;
  }
</style>

Props