Skip to content

Instantly share code, notes, and snippets.

@reneras
Created July 13, 2012 11:02
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save reneras/3104283 to your computer and use it in GitHub Desktop.
Save reneras/3104283 to your computer and use it in GitHub Desktop.
Lightweight HTML5 canvas spinner / loader
/*
* <html>
* <head>
* </head>
* <body>
* <canvas id="demo" height="400" width="400" style="background:#000;"></div>
* </body>
* </html>​
*
*/
var canvas = document.getElementById('demo');
var context = canvas.getContext('2d');
var start = new Date();
var lines = 16,
cW = context.canvas.width,
cH = context.canvas.height;
var draw = function() {
var rotation = parseInt(((new Date() - start) / 1000) * lines) / lines;
context.save();
context.clearRect(0, 0, cW, cH);
context.translate(cW / 2, cH / 2);
context.rotate(Math.PI * 2 * rotation);
for (var i = 0; i < lines; i++) {
context.beginPath();
context.rotate(Math.PI * 2 / lines);
context.moveTo(cW / 10, 0);
context.lineTo(cW / 4, 0);
context.lineWidth = cW / 30;
context.strokeStyle = "rgba(255,255,255," + i / lines + ")";
context.stroke();
}
context.restore();
};
window.setInterval(draw, 1000 / 30);
@euskadi31
Copy link

@dgmike
Copy link

dgmike commented Oct 17, 2014

My version http://jsfiddle.net/qKkkw/115/ just changing value 😆

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