dansteingart/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Circular Progressbar</title>
<script type="text/javascript" src="http://paperjs.org/static/js/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
project.currentStyle = {
	strokeColor: 'red',
	strokeWidth: 60,
	strokeCap: 'round'
};

function createProgress(radius, center, ratio) {
	var start = new Point({
		length: radius,
		angle: -90
	});
	var middle = start.rotate(360 * ratio / 2);
	var end = start.rotate(360 * ratio);

	var path = new Path();
	path.add(center + start);
	path.arcTo(center + middle, center + end);
	return path;
}

var progress;
function onFrame(event) {
	// If we made a progress path before, remove it:
	if (progress)
		progress.remove();

	//A value between 0 and 1:
	var ratio = (event.count % 500) / 500;

	// Create the progress path:
	progress = createProgress(200, view.center, ratio);
}
</script>
</head>
<body style="margin:0;overflow:hidden">
	<canvas id="canvas" resize></canvas>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Circular Progressbar</title>
	<script type="text/javascript" src="http://paperjs.org/static/js/paper.js"></script>
	<script type="text/paperscript" canvas="canvas">
	project.currentStyle = {
	strokeColor: 'red',
	strokeWidth: 60,
	strokeCap: 'round'
	};

	function createProgress(radius, center, ratio) {
	var start = new Point({
	length: radius,
	angle: -90
	});
	var middle = start.rotate(360 * ratio / 2);
	var end = start.rotate(360 * ratio);

	var path = new Path();
	path.add(center + start);
	path.arcTo(center + middle, center + end);
	return path;
	}

	var progress;
	function onFrame(event) {
	// If we made a progress path before, remove it:
	if (progress)
	progress.remove();

	//A value between 0 and 1:
	var ratio = (event.count % 500) / 500;

	// Create the progress path:
	progress = createProgress(200, view.center, ratio);
	}
	</script>
	</head>
	<body style="margin:0;overflow:hidden">
	<canvas id="canvas" resize></canvas>
	</body>
	</html>