css
body{text-align: center}
.demo1-bg1{
width: 400px;
height: 400px;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
margin: 50px auto;
background: fff;
border-radius: 50%;
box-shadow: 0 0 0 50px MediumSpringGreen inset;
}
.demo1-bg2-1,.demo1-bg2-2{
position: relative;
margin: 0;
padding: 0;
-webkit-box-flex: 1;
height: 300px;
background: #fff;
border: 50px solid grey;
}
.demo1-bg2-1{
border-radius: 200px 0 0 200px;
border-color: grey transparent grey grey;
transform-origin: 100% 50%;
z-index: 1;
}
.demo1-bg2-2{
border-radius: 0 200px 200px 0;
border-color: grey grey grey transparent;
transform-origin: 0 50%;
z-index: 2;
}
js
/**
* 圆形进度条
*/
$(function(){
var bg1 = document.querySelector("#J_bg2_1");
var bg2 = document.querySelector("#J_bg2_2");
var btn1 = 68;
var val = parseFloat(btn1).toFixed(2);
val = Math.max(0, val);
val = Math.min(100, val);
if (val <= 50) {
bg2.style.transform = "rotate(" + 180 * val * 2 / 100 + "deg)";
bg2.style.borderColor = "grey grey grey transparent";
bg1.style.transform = "rotate(0deg)";
}else {
bg2.style.transform = "rotate(0deg)";
bg2.style.borderColor = "MediumSpringGreen MediumSpringGreen MediumSpringGreen transparent";
bg1.style.transform = "rotate(" + 180 * (val - 50) * 2 / 100+ "deg)";
}
})
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="css/circular.css">
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="demo1-bg1">
<div id="J_bg2_1" class="demo1-bg2-1"></div>
<div id="J_bg2_2" class="demo1-bg2-2"></div>
</div>
<div style="position: relative;margin-top:-260px;z-index:2;">
<h1>68%</h1>
</div>
</body>
<script src="js/circular.js"></script>
</html>