Skip to content

Instantly share code, notes, and snippets.

@allex

allex/i.html

Forked from Victa/i.html
Created June 1, 2012 06:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save allex/2849395 to your computer and use it in GitHub Desktop.
Save allex/2849395 to your computer and use it in GitHub Desktop.
Download ZIP
Canvas Spinner
Raw
i.html
<!doctype html>
<title>Canvas spinner</title>
<link rel=stylesheet href=s.css>
<script src=s.js></script>
Raw
s.css
#spinner {
position:absolute;
left:50%;
top:45%;
margin-left:-8px;
}
Raw
s.js
window.onload = function(){
var canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),
size = 16,
bars = 12;
canvas.id = "spinner";
canvas.width = size;
canvas.height = size;
document.body.appendChild(canvas);
ctx.translate(size/2,size/2);
setInterval(function(){
ctx.clearRect(-size/2,-size/2,size,size);
ctx.rotate(Math.PI*2/bars);
for (var i=0; i<bars; i++) {
ctx.rotate(Math.PI*2/bars);
ctx.strokeStyle = "rgba(0,0,0," + i/bars + ")";
ctx.beginPath();
ctx.moveTo(0,size/4);
ctx.lineTo(0,size/2);
ctx.stroke();
}
}, 60);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment