Skip to content

Instantly share code, notes, and snippets.

@Craftworks

Craftworks/canvas_loading_icon.html

Created April 27, 2010 10:09
Show Gist options
  • Save Craftworks/380581 to your computer and use it in GitHub Desktop.
Save Craftworks/380581 to your computer and use it in GitHub Desktop.
Download ZIP
canvas loading icon
Raw
canvas_loading_icon.html
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var LoadingIcon = function() { this.initialize.apply(this, arguments) };
LoadingIcon.prototype = {
initialize: function(rgb) {
var element = document.createElement('canvas'),
ctx = element.getContext('2d');
element.width = 20;
element.height = 20;
this.element = element;
ctx.translate(10, 10);
ctx.rotate(-Math.PI/2);
this.ctx = ctx;
this.rgb = rgb || '0, 0, 0';
this.alpha = [ 1.0, 0.8, 0.6, 0.3, 0.3, 0.2, 0.1, 0.1 ];
},
drawCircle: function() {
var ctx = this.ctx;
ctx.clearRect(-10, -10, 20, 20);
for ( i in this.alpha ) {
this.drawBar(this.alpha[i]);
}
ctx.rotate(Math.PI/4);
},
drawBar: function(alpha) {
var ctx = this.ctx;
ctx.fillStyle = 'rgba(' + this.rgb + ',' + alpha + ')';
ctx.rotate(-Math.PI/4);
ctx.beginPath();
ctx.arc(3, 3, 1, 0, Math.PI * 2, true);
ctx.arc(4, 4, 1, 0, Math.PI * 2, true);
ctx.fill();
},
start: function() {
var self = this;
this.timer = window.setInterval(function() {
self.drawCircle();
}, 100);
return this;
},
stop : function() {
window.clearInterval(this.timer);
}
};
var loading = new LoadingIcon();
loading.start();
document.body.appendChild(loading.element);
window.setTimeout(function(){loading.stop()}, 3000);
document.body.appendChild((new LoadingIcon('128,0,0')).start().element);
document.body.appendChild((new LoadingIcon('0,128,0')).start().element);
document.body.appendChild((new LoadingIcon('0,0,128')).start().element);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment