html+css+js实现静态圆形进度条

基于网上很多前辈们的代码修改，在页面底部设置进度条，
先上效果图

思路：
1.设置背景层，左半圈，右半圈
2.通过js调整左右半圈旋转角度，以及颜色的设置
html代码

<div class="circle-bar">
			<div class="circle-bar-left"></div>
			<div class="circle-bar-right"></div>
			<div class="mask">
				<span class="percent"></span>
			</div>
</div>

css代码

.circle-bar {
	margin-top: 450px;
	font-size: 80px;
	width: 1em;
	height: 1em;
	margin-left: 700px;
	position: relative;
	background-color: #ffaa00;
}

.circle-bar-left, .circle-bar-right {
	width: 1em;
	height: 1em;
}

.circle-bar-right {
	clip: rect(0, auto, auto, .5em);
	background-color: #393956;
}

.circle-bar-left {
	clip: rect(0, .5em, auto, 0);
	background-color: #393956;
}

.mask {
	width: 0.8em;
	height: 0.8em;
	background-color: #fff;
	text-align: center;
	line-height: 0.2em;
}

.mask :first-child {
	font-size: 0.3em;
	height: 0.8em;
	line-height: 0.8em;
	display: block;
}

.circle-bar * {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

.circle-bar, .circle-bar>* {
	border-radius: 100%;
}

js代码

window.onload = function() {
	var circleBar = document.getElementsByClassName('circle-bar')[0];   
	var percent = 90;
	var color = circleBar.css('background-color');
	var left_circle = circleBar.getElementsByClassName('circle-bar-left')[0];
	var right_circle = circleBar.getElementsByClassName('circle-bar-right')[0];
	if (percent <= 50) {
		var left_rotate = 'rotate(' + (percent * 3.6) + 'deg)'; 
		right_circle.css3('transform', left_rotate);
	} else {
		var rotate = 'rotate(' + ((percent-50) * 3.6) + 'deg)';
		right_circle.css3('background-color', '#ffaa00');     	
		left_circle.css('transform', rotate); 	          	
	} 		
}    
Element.prototype.css = function(property, value) {
	if (value) {
		    
		var index = property.indexOf('-');
		if (index != -1) {
			var char = property.charAt(index + 1).toUpperCase();
			property.replace(/(-*){1}/, char);
		}
		this.style[property] = value;
	} else { 
		return window.getComputedStyle(this).getPropertyValue(property);
	}
}   
Element.prototype.css3 = function(property, value) {
	if (value) {
		property = capitalize(property.toLowerCase());
		this.style['webkit' + property] = value;
		this.style['Moz' + property] = value;
		this.style['ms' + property] = value;
		this.style['O' + property] = value;
		this.style[property.toLowerCase()] = value;
	} else {
		return window.getComputedStyle(this).getPropertyValue(('webkit' + property) || ('Moz' + property) || ('ms' +
			property) || ('O' + property) || property);
		 
	}     
	function capitalize(word) {
		return word.charAt(0).toUpperCase() + word.slice(1);
	}
}