Skip to content

Instantly share code, notes, and snippets.

@Victa

Victa/i.html

Created September 30, 2011 13:02
Show Gist options
  • Save Victa/1253680 to your computer and use it in GitHub Desktop.
Save Victa/1253680 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);
};
@Victa
Copy link
Author

Victa commented Sep 30, 2011

By BDC http://playground.deaxon.com/js/canvas-spinner/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment