https://github.com/quansitech/circle-progress

弧形进度条
https://github.com/quansitech/circle-progress

Last synced: 9 days ago
JSON representation

弧形进度条

• Host: GitHub
• URL: https://github.com/quansitech/circle-progress
• Owner: quansitech
• Created: 2023-01-13T06:36:20.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-01-13T06:38:12.000Z (over 3 years ago)
• Last Synced: 2025-03-02T23:44:05.826Z (over 1 year ago)
• Language: JavaScript
• Size: 3.91 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 弧形进度条

```html

    

    demo

    

    #app {

        width: 100px;

        height: 100px;

    }

    


        

    

    

        var el = document.getElementById('app');

        var options = {

            baseColor: 'grey', //指定背景圆弧色 不指定则默认使用 #AEC9C9

            coverColor: 'red'  //进度圆弧色 不指定则默认使用 #43BD32

            startRadian: '0.9 * Math.PI', //起始弧度 不指定则默认使用 0.5 * Math.PI 也就是圆形

            //关于startRadian 特别说明的是，只要指定了起始弧度，会根据对称原则计算结束弧度，可自行写demo看实际效果

        };


        //构造函数

        var circle = new CircleProgress(el, options);

        var percent = 0;

        var id = setInterval(function() {

            //更新进度

            circle.progress(++percent);

            if (percent >= 100) {

                clearInterval(id);

            }

        }, 30);

    

```