加载 loading 待优化 待新增

一些简单的加载动画

使用说明

简单引入

展开代码

<vi-loading></vi-loading>

样式

一部分样式为上一项目遗留产物，如果你喜欢可以使用它们

展开代码

<vi-loading type="diamond"></vi-loading>

展开代码

<vi-loading type="ball"></vi-loading>

展开代码

<vi-loading type="star"></vi-loading>

展开代码

<vi-loading type="disk"></vi-loading>

展开代码

<vi-loading type="round"></vi-loading>

大小

通过css属性--vi-loading-width调整加载动画大小(diamond动画不可调整)

展开代码

<vi-loading type="ball" style="--vi-loading-width: 30px;"></vi-loading>

展开代码

<vi-loading type="star" style="--vi-loading-width: 120px;"></vi-loading>

展开代码

<vi-loading type="disk" style="--vi-loading-width: 150px;"></vi-loading>

展开代码

<vi-loading type="round" style="--vi-loading-width: 80px;"></vi-loading>

颜色

除round外可以通过color属性调整颜色 round通过修改css变量vi-main-color调整颜色

展开代码

<vi-loading type="diamond"></vi-loading>
<vi-loading type="diamond" color="white"></vi-loading>
<vi-loading type="diamond" color="purple"></vi-loading>

展开代码

<vi-loading type="ball"></vi-loading>
<vi-loading type="ball" color="red"></vi-loading>
<vi-loading type="ball" color="pink"></vi-loading>
<vi-loading type="ball" color="purple"></vi-loading>
<vi-loading type="ball" color="green"></vi-loading>
<vi-loading type="ball" color="golden"></vi-loading>
<vi-loading type="ball" color="blue"></vi-loading>

展开代码

<vi-loading type="star"></vi-loading>
<vi-loading type="star" color="red"></vi-loading>
<vi-loading type="star" color="pink"></vi-loading>
<vi-loading type="star" color="purple"></vi-loading>
<vi-loading type="star" color="green"></vi-loading>
<vi-loading type="star" color="golden"></vi-loading>
<vi-loading type="star" color="blue"></vi-loading>

展开代码

<vi-loading type="disk"></vi-loading>
<vi-loading type="disk" color="red"></vi-loading>
<vi-loading type="disk" color="pink"></vi-loading>
<vi-loading type="disk" color="purple"></vi-loading>
<vi-loading type="disk" color="green"></vi-loading>
<vi-loading type="disk" color="golden"></vi-loading>
<vi-loading type="disk" color="blue"></vi-loading>

展开代码

<vi-loading type="round" style="--vi-purple-color3: red"></vi-loading>

Props

属性名	描述	类型	默认值

插槽

无插槽

事件支持

无特殊事件

可覆写css变量

变量名	描述	默认值