```
<!DOCTYPE html>
<html>
<head>
<title>Cool HTML5 Canvas Preloader</title>
<style type="text/css">
body {
background-color: #222;
color: #fff;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
text-align: center;
}
canvas {
display: block;
margin: 0 auto;
padding: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var cw = canvas.width = 200;
var ch = canvas.height = 200;
var cx = cw / 2,
cy = ch / 2;
var rad = Math.PI / 180;
var frames = 0;
function drawCircle() {
ctx.beginPath();
ctx.strokeStyle = '#fff';
ctx.lineWidth = 10;
ctx.arc(cx, cy, 60, -90 * rad, (frames * 6 - 90) * rad);
ctx.stroke();
}
function render() {
frames++;
ctx.clearRect(0, 0, cw, ch);
drawCircle();
requestAnimationFrame(render);
}
render();
</script>
</body>
</html>
```
