Nutritious Pumpkin Masses

    ring-progress

    1.0.0 • Public • Published

    Circle-Progress

    theapin

    Circle-Progress是一款使用js编写的基于canvas的环形进度条插件,该插件简单小巧,高度可配置,不依赖任何第三方库。

    使用示例代码

    html代码

    <canvas id="canvas" width="600px" height="600px"></canvas>
    

    js代码

    var ring = new Ring({
        canvasId:'canvas',
        x:100,
        y:100,
        r:60,
        strokeStyle:"rgb(255,84,6)",
        color:"rgb(46,47,255)",
        width:15,
        percent:68.8,
        animate:false,
        text:"进度条"
    });
    

    配置属性

    属性 默认值 含义
    canvas 'canvas' canvas id值
    x 100 圆心x坐标
    y 100 圆心y坐标
    r 100 圆环半径
    width 15 圆环宽度
    percent 50 进度条百分比
    direction false 绘制方式是否是顺时针
    strokeBgStyle "#DDDDDD" 背景环的背景色
    strokeStyle "#01FF01" 百分环的背景色
    text "" 环形中显示的文字内容
    color "#333" 环形文字中的颜色
    fontSize 16 文字大小
    animate true 是否动画加载环形

    Install

    npm i ring-progress

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    4.74 kB

    Total Files

    4

    Last publish

    Collaborators

    • theapin