1. illmatic-circular-progress

illmatic-circular-progress

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)