Vant Loading 加载组建主要实现菊花跟圆圈加载样式。

import Vue from 'vue';
import { Loading } from 'vant';

Vue.use(Loading);

通过type可以设置加载图标的类型，认为circular，可选值为spinner

<van-width="100%" class="table-bordered" />
<van-width="100%" class="table-bordered" type="spinner" />

通过color设置加载图标的颜色

<van-width="100%" class="table-bordered" color="#1989fa" />
<van-width="100%" class="table-bordered" type="spinner" color="#1989fa" />

通过size设置加载图标的大小，认单位为px

<van-width="100%" class="table-bordered" size="24" />
<van-width="100%" class="table-bordered" type="spinner" size="24px" />

可以使用认插槽在图标的右侧插入加载文案

<van-width="100%" class="table-bordered" size="24px">加载中...</van-width="100%" class="table-bordered">

设置vertical后，图标和文案会垂直排列

<van-width="100%" class="table-bordered" size="24px" vertical>加载中...</van-width="100%" class="table-bordered">

API

演示