progressCircle

功能描述

实现了环形进度条的功能，开发者可以自定义进度、进度色、进度条的宽度和背景色

依赖模块

无

快速使用

var progressCircle = new ProgressCircle({
    el: '#progress', //进度条容器
    percentage: 10, //百分百进度
    width: 120, //宽度
    strokeWidth: 8, //环形的宽度，当环形的宽度是width的一半时是扇形
    color: 'blue', //进度条的颜色
    background: 'red' //进度条的背景色
})

配置项

el

• 类型：String或Element（dom对象）
• 默认值：无
• 是否必传：是
• 作用：进度条容器

percentage

• 类型：Number
• 默认值：0
• 是否必传：否
• 作用：进度条的进度（0-100）

width

• 类型：Number
• 作用：环形进度条画布宽度
• 默认值：100
• 是否必传：否

strokeWidth

• 类型：Number
• 默认值：10
• 是否必传：否
• 作用：环形进度条的宽度（单位：px）(当环形进度条的宽度是width的一半时是扇形)

color

• 类型：String
• 默认值：rgba(66, 185, 131)
• 是否必传：否
• 作用：进度条的颜色

background

• 类型：String
• 默认值：rgba(66, 185, 131, 0.5)
• 是否必传：否
• 作用：进度条的背景色

方法

• setPercentage 设置进度条的进度

  progressCircle.setPercentage(30)

特别说明

无