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)
    

特别说明