illmatic-circular-progress
v1.0.2
Published
circular progress bar based on Vue
Downloads
8
Maintainers
Readme
illmatic-circular-progress
基于 Vue 的环形进度条
使用说明
1.安装
npm install illmatic-circular-progress --save
or
yarn add illmatic-circular-progress
2.注册:
import illmaticCircularProgress from 'illmatic-circular-progress';
Vue.use(illmaticCircularProgress);
3.使用
<illmatic-circular-progress></illmatic-circular-progress>
参数
props:
circleOptions:{ width: 60, // 圆宽度 height: 60, // 圆高度 borderWidth: 4, // 进度条宽度 borderColor: "#87CEFA", // 进度条颜色 backGroundColor: "#EDEDED" // 进度条底色 }
direction: "clockwise" //进度条方向(顺时针:clockwise,逆时针:anticlockwise)
duration: 100 // 总量(例如:100S 或者 100M 都是 100)
current: 40 // 当前进度(例如:40S 或者 40M 都是 40)
playState: "running" //进度条状态(运行:running,暂停:paused)