Skip to content

Instantly share code, notes, and snippets.

@mingelz

mingelz/progress circle

Created July 30, 2013 08:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mingelz/6111248 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mingelz/6111248 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
progress circle
<!doctype html>
<html>
<head>
<style>
body{padding-top:30px;background-color:#555a61;}
#progressbar{position:relative;z-index:1;margin:0 auto;width:20em;height:20em;background-color:#444a50;border-radius:10em;box-shadow:0 .1em .3em #3f444a inset;font-size:10px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);}
#progressbar:before{content:'\20';position:absolute;z-index:10;left:2em;top:2em;width:16em;height:16em;overflow:hidden;background-color:#555a61;border-radius:8em;box-shadow:0 .1em .3em #3f444a;}
#progressbar:after{content:'\20';position:absolute;z-index:9;left:2.85em;top:2.82em;width:1.6em;height:1.6em;background-color:#d9dbdb;border-radius:1.6em;}
s{position:absolute;left:.2em;top:.2em;border:1.6em solid;width:16.4em;height:16.4em;border-radius:10em;}
.p50,
.p100{display:none;z-index:2;border-color:#d9dbdb #d9dbdb transparent transparent;}
.p50:after,
.p100:after{content:'\20';position:absolute;z-index:3;right:1.1em;bottom:1.02em;width:1.56em;height:1.56em;background-color:#d9dbdb;border-radius:1.6em;}
.mask{z-index:6;left:.1em;top:.1em;border:1.8em solid;border-color:transparent transparent #444a50 #444a50;width:16.2em;height:16.2em;border-radius:10em;}
.text{position:absolute;z-index:11;left:0;top:0;width:10em;height:10em;color:#fff;font:700 2em/10em verdana;text-align:center;-webkit-transform:rotate(-45deg);}
#controls{margin:0 auto;width:200px;color:#fff;}
</style>
</head>
<body>
<div id="progressbar">
<s class="p50"></s>
<s class="p100"></s>
<s class="mask"></s>
<span class="text">0</span>
</div>
<div id="controls">
<p>进度：<input class="value" type="range" min="0" max="100" value="0" /></p>
<p>大小：<input class="size" type="range" min="5" max="60" value="10" /></p>
</div>
<script>
(function(doc){
var bar = doc.querySelector('#progressbar');
var p50 = bar.querySelector('.p50');
var p100 = bar.querySelector('.p100');
var mask = bar.querySelector('.mask');
var text = bar.querySelector('.text');
var show = function(el){el.style.display='block';}
var hide = function(el){el.style.display='none';}
var setDeg = function(el,deg){el.style.cssText='display:block;-webkit-transform:rotate(' + deg + 'deg);-moz-transform:rotate(' + deg + 'deg);-ms-transform:rotate(' + deg + 'deg);';}
document.querySelector('.value')
.addEventListener( 'change', function(){
var value = this.value;
var degrees = Math.abs( value - 50 ) / 50 * 180;
text.innerHTML = value;
if ( value < 1 ) {
hide(p50);
hide(p100);
} else
if ( value < 50 ) {
show(mask);
show(p50);
hide(p100);
setDeg(p50,-degrees);
} else
if ( value >= 50 ) {
hide(mask);
show(p50);
show(p100);
setDeg(p50,0);
setDeg(p100,degrees);
}
}, false);
document.querySelector('.size')
.addEventListener( 'change', function(){
var value = this.value;
progressbar.style.fontSize = value + 'px';
}, false);
}(document));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment