Progress Bars

<!DOCTYPE html>
<html>
<head>
<style>
/*===== Not The CSS :P =====*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
h1 {
	font-family: 'Open Sans';
	color: rgb(255, 255, 255);
	text-align: center;
	margin: 50px 0 -80px;
}
a {
	font-family: 'Open Sans';
	color: rgb(0, 0, 0);
	margin: 50px 0 -80px;
	text-align: center;
	width: 100%;
	font-size: 12px;
	text-decoration: none;
}
#wrapper{
	position: relative;
	top: 80px;
	width: 404px;
}
.center {
	left: 50%;
	-webkit-transform: translate( -50% );
	-ms-transform: translate( -50% );
	transform: translate( -50% );
}

/*===== The CSS =====*/
.progress{
	width: 200px;
	height: 280px;
}
.progress .track, .progress .fill{
	fill: rgba(0, 0, 0, 0);
	stroke-width: 3;
	transform: rotate(90deg)translate(0px, -80px);
}
.progress .track{
	stroke: rgb(56, 71, 83);
}
.progress .fill {
	stroke: rgb(255, 255, 255);
	stroke-dasharray: 219.99078369140625;
	stroke-dashoffset: -219.99078369140625;
	transition: stroke-dashoffset 1s;
}
.progress.blue .fill {
	stroke: rgb(51, 102, 255);
}
.progress.orange .fill {
	stroke: rgb(255, 204, 102);
}
.progress.pink .fill {
	stroke: rgb(255, 102, 204);
}
.progress.red .fill {
	stroke: rgb(255, 51, 0);
}
.progress.green .fill {
	stroke: rgb(0, 255, 204);
}
.progress.purple .fill {
	stroke: rgb(204, 102, 255);
}

.progress .value, .progress .text {
	font-family: 'Open Sans';
	fill: rgb(0, 0, 0);
	text-anchor: middle;
}
.progress .text {
	font-size: 12px;
}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
		cursor: default;
}


</style>
</head>
<body>

<div id="wrapper" class="center">
	<svg class="progress blue noselect" data-progress="85" x="0px" y="0px" viewBox="0 0 80 80">
		<path class="track" d="M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0" />
		<path class="fill" d="M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0" />
		<text class="value" x="50%" y="55%">0%</text>
		<text class="text" x="50%" y="115%">Photoshop</text>
	</svg>
	<svg class="progress orange noselect" data-progress="90" x="0px" y="0px" viewBox="0 0 80 80">
		<path class="track" d="M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0" />
		<path class="fill" d="M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0" />
		<text class="value" x="50%" y="55%">0%</text>
		<text class="text" x="50%" y="115%">Illustrator</text>
	</svg>
    <svg class="progress pink noselect" data-progress="80" x="0px" y="0px" viewBox="0 0 80 80">
		<path class="track" d="M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0" />
		<path class="fill" d="M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0" />
		<text class="value" x="50%" y="55%">0%</text>
		<text class="text" x="50%" y="115%">InDesign</text>
	</svg>
	<svg class="progress red noselect" data-progress="90" x="0px" y="0px" viewBox="0 0 80 80">
		<path class="track" d="M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0" />
		<path class="fill" d="M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0" />
		<text class="value" x="50%" y="55%">0%</text>
		<text class="text" x="50%" y="115%">Micrsoft Office</text>
	</svg>
    <svg class="progress green noselect" data-progress="93" x="0px" y="0px" viewBox="0 0 80 80">
		<path class="track" d="M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0" />
		<path class="fill" d="M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0" />
		<text class="value" x="50%" y="55%">0%</text>
		<text class="text" x="50%" y="115%">Photography</text>
	</svg>
	<svg class="progress purple noselect" data-progress="40" x="0px" y="0px" viewBox="0 0 80 80">
		<path class="track" d="M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0" />
		<path class="fill" d="M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0" />
		<text class="value" x="50%" y="55%">0%</text>
		<text class="text" x="50%" y="115%">HTML/CSS</text>
	</svg>
</div>


<script>
/* Set Progress | jQuery
======================================*/
/*
$(document).ready(function(){
	var max = 150.72259521484375;
	$.each($('.progress'), function( index, value ){
		percent = $(value).data('progress');
		$(value).children($('.fill')).attr('style', 'stroke-dashoffset: ' + ((100 - percent) / 100) * max);
		$(value).children($('.value')).text(percent + '%');
	});
});
*/


var forEach = function (array, callback, scope) {
	for (var i = 0; i < array.length; i++) {
		callback.call(scope, i, array[i]);
	}
};
window.onload = function(){
	var max = -219.99078369140625;
	forEach(document.querySelectorAll('.progress'), function (index, value) {
	percent = value.getAttribute('data-progress');
		value.querySelector('.fill').setAttribute('style', 'stroke-dashoffset: ' + ((100 - percent) / 100) * max);
		value.querySelector('.value').innerHTML = percent + '%';
	});
}


/*

Used to calc the variable 'max'
and set 'stroke-dasharray' and
'stroke-dashoffset' in the css


  	console.log(document.querySelector('.fill').getTotalLength());

*/
</script>

</body>
</html>