Skip to content

Instantly share code, notes, and snippets.

@mwiemarc

mwiemarc/Circle Progress Bar

Forked from innovationhero/Circle Progress Bar
Created June 19, 2018 03:15
Show Gist options
  • Save mwiemarc/878204ca6aae6afd5e8afa0d9a0ab3d2 to your computer and use it in GitHub Desktop.
Save mwiemarc/878204ca6aae6afd5e8afa0d9a0ab3d2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Circle Progress Bar
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type="text/css">
body{
background-color:#ccc;
padding: 20px;
}
.outer {
position:relative;
display:block;
width: 200px;
height:200px;
background-image:-webkit-linear-gradient(#999,#eee);
border-radius:100px;
padding:5px
}
.inner {
position: absolute;
z-index: 9;
display:block;
width: 140px;
height:140px;
background-color: #F0F3F6;
border-radius: 70px;
margin: 30px;
box-shadow: 0px 2px 3px #333;
}
#text {
display:block;
width: 100%;
text-align: center;
line-height: 140px;
font-family: Helvetica;
font-size: 40px;
color: #4B4F58;
}
.circle {
position: absolute;
top: 0;
left:0;
margin: 5px;
z-index: 1;
display: block;
float: left;
width: 200px;
height: 200px;
border-radius: 100px;
background-image: -webkit-radial-gradient(circle, #fff 60px, #BFC8D0 85px, #4B4F58 100px);
}
.start_mask {
display: block;
width: 100px;
height: 100px;
background-image: -webkit-linear-gradient(right, transparent 95px, rgba(65,157,34,0.2) 100px, transparent 100px);
position: absolute;
top:5px;
left:105px;
z-index: 10;
background-size: 100px 30px;
background-repeat: no-repeat;
opacity:0;
}
.end_mask {
display: block;
width: 100px;
height: 100px;
background-image: -webkit-linear-gradient(left, transparent 95px, rgba(65, 157, 34, 0.2) 100px);
position: relative;
z-index: 10;
background-size: 100px 30px;
background-repeat: no-repeat;
-webkit-transform-origin: right bottom;
opacity:0;
-webkit-transition-timing-function: linear;
}
/* for right 左透明，右填充 */
.mask1 {
position: absolute;
top: 0;
left:0;
margin: 5px;
z-index:2;
display:block;
width:200px;
height:200px;
-webkit-mask-image: -webkit-linear-gradient(left, transparent 100px, #000 100px);
}
/* for left 左填充，右透明*/
.mask2 {
position:absolute;
top:0;
left:0;
margin: 5px;
z-index:2;
display:block;
width:200px;
height:200px;
-webkit-mask-image: -webkit-linear-gradient(left, #000 100px, transparent 100px);
}
.prog {
display: block;
float: left;
width: 200px;
height: 200px;
border-radius: 100px;
background-image: -webkit-radial-gradient(circle, #fff 60px, #64CB39 80px, #21830D 96px);
-webkit-transition-timing-function: linear;
}
/* 右图像，左裁剪 */
.mask1 .prog {
-webkit-mask-image: -webkit-linear-gradient(left, #000 100px, transparent 100px);
}
/* 右裁剪 */
.mask2 .prog {
-webkit-mask-image: -webkit-linear-gradient(left, transparent 100px, #000 100px);
}
</style>
<script type="text/javascript">//<![CDATA[
var sec = 1;
function progress(num) {
if(typeof num == "undefined") {var num = document.getElementsByName("prog")[0].value;}
sec = document.getElementsByName("speed")[0].value / 100;
var right = document.querySelector('.mask1 .prog'),
left = document.querySelector('.mask2 .prog'),
startMask = document.getElementsByClassName('start_mask')[0],
endMask = document.getElementsByClassName('end_mask')[0],
text = document.getElementById('text');
ang = 360 * ( num / 100 );
console.log(ang, ang - 180);
startMask.style.cssText = "opacity:1";
var i = 0,
m = setInterval(function(){if(i >= num) clearInterval(m);text.textContent = (i++)+'%';}, sec*1000/num);
if(num > 0 && num <= 50){
right.style.cssText = "-webkit-transition-duration:"+sec+"s; -webkit-transform:rotate(" + ang + "deg)";
}
else if(num > 50 && num <= 100) {
var rightTime = 50 * sec / num,
leftTime = (num-50)* sec/num;
right.style.cssText = "-webkit-transition-duration:"+rightTime+"s; -webkit-transform:rotate(180deg)";
left.style.cssText = "-webkit-transition-delay:"+rightTime+"s; -webkit-transition-duration:"+leftTime+"s; -webkit-transform:rotate(" + (ang-180) + "deg)";
}
endMask.style.cssText = "-webkit-transition-duration:"+sec+"s; opacity:1; -webkit-transform:rotate(" + ang + "deg)";
}
function reset(){
var right = document.querySelector('.mask1 .prog'),
left = document.querySelector('.mask2 .prog'),
startMask = document.getElementsByClassName('start_mask')[0],
endMask = document.getElementsByClassName('end_mask')[0];
right.style.cssText = left.style.cssText = startMask.style.cssText = endMask.style.cssText = "";
document.getElementById('text').textContent = "0%";
}
//]]>
</script>
</head>
<body>
<!-- 只有 Chrome / Safari 等 Webkit 核心的浏览器才能运行
http://dribbble.com/shots/629733-App-UI-elements
-->
<span class="outer" onclick="progress(80)">
<span class="inner">
<span id="text">0%</span>
</span>
<span class="end_mask" style=""></span>
<span class="start_mask" style=""></span>
<span class="mask1">
<span class="prog" style=""></span>
</span>
<span class="mask2">
<span class="prog" style=""></span>
</span>
<span class="circle">
</span>
</span>
<p>Speed: <input name="speed" type="range" min="1" max="100" value="80"><br>
Progress: <input name="prog" type="range" min="1" max="100" value="80">
</p>
<p style="clear:both"><button onclick="reset()">Reset</button>&nbsp;&nbsp;<button onclick="progress()">Run</button></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment