原生JS简单绘制一个圆形进度条

结构: 

<div class="box"></div>

样式

/*原形条*/
.wrap,.circle,.num {width: 200px;height: 200px;border-radius: 50%;}
.wrap {	position: relative;	border: 10px solid #ccc;box-sizing: border-box;}
.circle { position: absolute; top: -10px; left: -10px; box-sizing: border-box;}
.circle div {width: 200px; height: 200px;position: absolute;box-sizing: border-box;	border-radius: 50%;}
.num {	position: absolute;	top: -10px;	left: -10px;	line-height: 200px;	text-align: center;	font-size: 50px;}
.left {	clip: rect(0, 100px, 200px, 0);	border: 10px solid #f00;}
.right {clip: rect(0, 200px, 200px, 100px);	border: 10px solid #f00;}

JS代码

 function Yuan(element,num){
            this.box = element;//获取节点
            this.box.className = 'wrap';

            //创建节点circle
            this.circle = document.createElement("div");
            this.circle.className = "circle";
            this.box.appendChild(this.circle);

            //创建circle的子节点left
            this.left = document.createElement("div");
            this.left.className = "left";
            this.circle.appendChild(this.left);

            //创建circle的子节点right
            this.right = document.createElement("div");
            this.right.className = "right";
            this.circle.appendChild(this.right);

            //创建节点num
            this.num = document.createElement("div");
            this.num.className = "num";
            this.box.appendChild(this.num);
            this.num.innerHTML = '<span class="">'+ num +'</span>%';
            this.jz(num);
        }
        Yuan.prototype.jz = function(num){
            var i = 0;
            var that = this;
            var int = setInterval(function(){
                that.gx( num/10*i );
                i++;
                if(i>10){
                    clearInterval(int)
                }
            },0);//这里可以修改绘制进度的时间
        }
        Yuan.prototype.gx  = function(n){
            if(n <= 50) {
                this.right.style.display = 'none';
                this.circle.style.clip = 'rect(0, 200px, 200px, 100px)';
            } else {
                this.right.style.display = 'block';
                this.circle.style.clip = 'rect(auto, auto, auto, auto)';
            }
            this.left.style.transform = 'rotate(' + n * 360 / 100 + 'deg)';

        }
        let box = new Yuan(document.querySelector('.box'),78);

转载自https://blog.csdn.net/cjp66666666666/article/details/80594664

实现原理链接:点我啦~~