Enyo Canvas Spinner

a loading spinner using canvas in enyo

by joopmicroop

HTML

<script type="text/javascript">
    new App().renderInto(document.body);
</script>

JavaScript

enyo.kind({
    name: 'App',
    kind: enyo.Control,
    components: [
        {kind:'CanvasSpinner'},                
    ],
});

//http://milhen.ch/archive/html5-spinner/
enyo.kind({
   name: "CanvasSpinner",
   kind: "enyo.Canvas",
   nodeTag: "canvas",
   canvas: "",
   context: "",
   steps:12,   
   speed:100,    
   attributes: {
      width: "200px",
      height:"200px"
   },
   rendered: function() {
       this.hasNode();     //Sets the node property of the rendered DOM node
       this.canvas = this.node;
       this.context = this.canvas.getContext('2d');
       this.drawCanvas();
   },
    drawCanvas:function(){
        this.context.translate(20, 20);
        setInterval(function(){
            this.context.rotate(Math.PI * 2 / this.speed);
            this.model();
        }.bind(this),10);
    },
    model:function(){
         for (i = 0; i < 12; i++) {
            this.context.rotate(Math.PI * 2 / this.steps); // Rotate a 12th of 360 degrees
            this.context.beginPath();
            this.context.moveTo(10, 0);
            this.context.lineTo(20, 0);
            this.context.lineWidth=5;
            this.context.strokeStyle = "rgba(0,0,0,"+ i / this.steps +")";
            this.context.stroke();
            this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
        }
    },
});