/Progress-Bar-(Pie).markdown

## index.html
<head>
  <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css' />
</head>
<body>
  <div id="prog-contain">
    <div class="prog"></div>
  </div>
  <div id="desc">Change: "<em>var percent = XX;</em> " in JS portion to update progress... </div>
</body>

## Progress-Bar-(Pie).markdown

      
    Raw
  

              Progress-Bar-(Pie).markdown
            
          
    Progress Bar (Pie)

Working on creating an appealing circular progress bar.
A Pen by Kurt Hanson on CodePen.
License.

  
## script.js

function drawProgress(percent){

  // Adjust Value Here
  var percent = 30;

	$('div.prog').html('<div class="percent"></div><div id="slice"'+(percent > 50?' class="gt50"':'')+'><div class="pie"></div>'+(percent > 50?'<div class="pie fill"></div>':'')+'</div>');
	var deg = 360/100*percent;
	$('#slice .pie').css({
		'-moz-transform':'rotate('+deg+'deg)',
		'-webkit-transform':'rotate('+deg+'deg)',
		'-o-transform':'rotate('+deg+'deg)',
		'transform':'rotate('+deg+'deg)'
	});
	$('.percent').html('<p>' + Math.round(percent)+'%</p>');
}


$(document).ready(function(){
	drawProgress();
});

## style.css
body {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: bold;
  color: #5c5c5c;
  background: #dddddd;
  padding: 40px 0 0 0;
}

#desc {
  text-align: center;
  margin: 40px 0;
}

.prog {
	position:relative;
	font-size: 300px;
	width:1em;
	height:1em;
	float: left;
}

#prog-contain {
  width: 300px;
  height: 300px;
  border-radius: 200px;
  border: solid 10px white;
  -moz-box-shadow:    3px 3px 5px 6px #bbb;
  -webkit-box-shadow: 3px 3px 5px 6px #bbb;
  box-shadow:         3px 3px 5px 6px #bbb;
  margin: 0px auto;
}

.prog > .percent {
	position: absolute;
	font-size: 0.3em;
  text-align: center;
  top: 30px;
  right: 30px;
  width: 180px;
  height: 180px;
  border: 2px solid white;
  border-radius: 200px;
  background: white;
  padding:28px;
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}

.prog > .percent > p{
  margin: 30px 0 0 15px;
}
.prog > #slice {
	position:absolute;
	width:1em;
	height:1em;
	clip:rect(0px,1em,1em,0.5em);
}
.prog > #slice.gt50 {
	clip:rect(auto, auto, auto, auto);
}
.prog > #slice > .pie {
	border: .1em solid #9a3e3e;
	position:absolute;
	width:0.8em; /* 1 - (2 * border width) */
	height:0.8em; /* 1 - (2 * border width) */
	clip:rect(0em,0.5em,1em,0em);
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em;
	border-radius:0.5em;
}
.prog > #slice > .pie.fill {
	-moz-transform:rotate(180deg) !important;
	-webkit-transform:rotate(180deg) !important;
	-o-transform:rotate(180deg) !important;
	transform:rotate(180deg) !important;
}
.prog.fill > .percent {
	display: none;
}
.prog.fill > #slice > .pie {
	border: transparent;
 	width:1em;
	height:1em;
}
	<head>
	<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css' />
	</head>
	<body>
	<div id="prog-contain">
	<div class="prog"></div>
	</div>
	<div id="desc">Change: "<em>var percent = XX;</em> " in JS portion to update progress... </div>
	</body>

	function drawProgress(percent){

	// Adjust Value Here
	var percent = 30;

	$('div.prog').html('<div class="percent"></div><div id="slice"'+(percent > 50?' class="gt50"':'')+'><div class="pie"></div>'+(percent > 50?'<div class="pie fill"></div>':'')+'</div>');
	var deg = 360/100*percent;
	$('#slice .pie').css({
	'-moz-transform':'rotate('+deg+'deg)',
	'-webkit-transform':'rotate('+deg+'deg)',
	'-o-transform':'rotate('+deg+'deg)',
	'transform':'rotate('+deg+'deg)'
	});
	$('.percent').html('<p>' + Math.round(percent)+'%</p>');
	}


	$(document).ready(function(){
	drawProgress();
	});
	body {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: bold;
	color: #5c5c5c;
	background: #dddddd;
	padding: 40px 0 0 0;
	}

	#desc {
	text-align: center;
	margin: 40px 0;
	}

	.prog {
	position:relative;
	font-size: 300px;
	width:1em;
	height:1em;
	float: left;
	}

	#prog-contain {
	width: 300px;
	height: 300px;
	border-radius: 200px;
	border: solid 10px white;
	-moz-box-shadow: 3px 3px 5px 6px #bbb;
	-webkit-box-shadow: 3px 3px 5px 6px #bbb;
	box-shadow: 3px 3px 5px 6px #bbb;
	margin: 0px auto;
	}

	.prog > .percent {
	position: absolute;
	font-size: 0.3em;
	text-align: center;
	top: 30px;
	right: 30px;
	width: 180px;
	height: 180px;
	border: 2px solid white;
	border-radius: 200px;
	background: white;
	padding:28px;
	-moz-box-shadow: 3px 3px 5px 6px #ccc;
	-webkit-box-shadow: 3px 3px 5px 6px #ccc;
	box-shadow: 3px 3px 5px 6px #ccc;
	}

	.prog > .percent > p{
	margin: 30px 0 0 15px;
	}
	.prog > #slice {
	position:absolute;
	width:1em;
	height:1em;
	clip:rect(0px,1em,1em,0.5em);
	}
	.prog > #slice.gt50 {
	clip:rect(auto, auto, auto, auto);
	}
	.prog > #slice > .pie {
	border: .1em solid #9a3e3e;
	position:absolute;
	width:0.8em; /* 1 - (2 * border width) */
	height:0.8em; /* 1 - (2 * border width) */
	clip:rect(0em,0.5em,1em,0em);
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em;
	border-radius:0.5em;
	}
	.prog > #slice > .pie.fill {
	-moz-transform:rotate(180deg) !important;
	-webkit-transform:rotate(180deg) !important;
	-o-transform:rotate(180deg) !important;
	transform:rotate(180deg) !important;
	}
	.prog.fill > .percent {
	display: none;
	}
	.prog.fill > #slice > .pie {
	border: transparent;
	width:1em;
	height:1em;
	}