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)

特别说明

无

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18