利用css完成一个环形进度条

　　因为项目需要一个环形进度条,所以研究并且参考了下别人的实现,话不多说直接上代码．

　　１.html

<div class="circle-progress">
    <div class="wrapper right">
        <div class="circle-progress-bar circle-right"></div>
    </div>
    <div class="wrapper left">
        <div class="circle-progress-bar circle-left"></div>
    </div>
</div>

　　2.css

.circle-progress {
 	width: 120px;
 	height: 120px;
 	position: relative;
	margin-bottom: 5px;
}
.circle-progress .wrapper {
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	overflow: hidden;
}
.circle-progress .wrapper .circle-progress-bar {
	width: 200%;
	height: 100%;
	box-sizing: border-box;
	border: 12px solid transparent;
	border-radius: 50%;
	position: absolute;
	top: 0;
	transform: rotate(45deg);
}
.circle-progress .wrapper .circle-right {
	border-top: 12px solid green;
	border-right: 12px solid green;
	right: 0;
}
.circle-progress .wrapper .circle-left {
	border-bottom: 12px solid green;
	border-left: 12px solid green;
	left: 0;
}
.circle-progress .wrapper-back {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-radius: 50%;
	border: 12px solid #eee;
}
.circle-progress .right {
	right: 0;
}
.circle-progress .left {
	left: 0;
}

　　效果大概是这样:

此时是100%的情况,利用js方便控制进度.

　　3.js

function setCircle (dom,percent) {
    var deg = percent * 360;
    var reDeg = 0;
    if(deg >= 180) {
        reDeg = deg - 315;
        dom.getElementsByClassName("circle-right")[0].style.transform = "rotate(45deg)"; 
        dom.getElementsByClassName("circle-left")[0].style.transform = "rotate("+reDeg+"deg)"; 
    } else {
        reDeg = deg - 135;
        dom.getElementsByClassName("circle-right")[0].style.transform = "rotate("+reDeg+"deg)"; 
        dom.getElementsByClassName("circle-left")[0].style.transform = "rotate(-135deg)"; 
    }
}

　

　　效果大概是这样

　　

　　细节再美化下大概是这样,这是项目里的了,就不展示具体代码了.

 

转载于:https://www.cnblogs.com/LandMine/p/7121515.html