process-wave
一个圆形水波进度图。
如何使用?
首先,需要安装npm包(目前我们仅支持npm方式管理):
npm install --save clunch @clunch/process-wave
然后注册组件:
import Clunch from 'clunch';
import processWave from '@clunch/process-wave';
Clunch.series('ui-process-wave',processWave);
然后,你就可以使用这个组件了:
<ui-process-wave process='number'/>
- process:进度(闭区间0~1,比如0.5)
除了上面的必输项外,还有下列可选项:
属性 | 类型 | 描述 | 默认值 | 可选值 |
---|---|---|---|---|
cx | number | 图形中心位置横坐标 | 画布中心横坐标 | |
cy | number | 图形中心位置纵坐标 | 画布中心纵坐标 | |
radius | number | 图形半径 | 画布最小边的一半 | |
deep | number | 动画进度 | 0.25 | 0~1 |
由于此组件是基于Clunch开发的,我们默认你已经掌握了相关知识。
开源协议
Copyright (c) 2021-2022 hai2007 走一步,再走一步。