Loading effect based on HTML5 Canvas implementation

Sonic.js is a very small JavaScript class that is used to create a load image based on the HTML5 canvas. What's more, Sonic.js also provides a tool for creating tools based on ready-made examples to help you achieve more customized (Loading) loading animations.

Online preview Source Download

The implemented code.

HTML code:

 var loaders = [{width:100, height:50, Padding:10, Stepsperframe:2, Traillengt H:1, Pointdistance:. Strokecolor: ' #FF7B24 ', Step: ' Fader ', Multiplier:2, Setup:        function () {this._.linewidth = 5;            }, Path: [[' Arc ', ten, Ten, -270, -90], [' Bézier ', 10, 0, 40, 20, 20, 0, 30, 20],         [' Arc ', Max, ten, Ten, -90], [' Bézier ', ' 0 ', ' ten ', ' 0 ', ' + ']}, {width:30,        Height:30, Stepsperframe:2, Traillength:. 3, Pointdistance:. 1, Padding:10,        FillColor: ' #D4FF00 ', Strokecolor: ' #FFF ', setup:function () {this._.linewidth = 20; }, Path: [[' Line ', 0, 0, +, 0], [' line ', ' ', ' 0 ', ' + ', ' line ', 30, 30, 0, 30]  , [' line ', 0, 0, 0]}, {width:100, height:100,      Stepsperframe:1, Traillength:1, pointdistance:. 025, Strokecolor: ' #05E2FF ', fps:20,        Setup:function () {this._.linewidth = 2;                }, Step:function (point, index) {var cx = this.padding +, cy = this.padding + 50,            _ = this._, Angle = (math.pi/180) * (point.progress * 360);            This._.globalalpha = Math.max (. 5, This.alpha);            _.beginpath ();            _.moveto (Point.x, POINT.Y);            _.lineto ((Math.Cos (angle) * + cx), (Math.sin (angle) * +) + cy);            _.closepath ();            _.stroke ();            _.beginpath ();            _.moveto ((Math.Cos (-angle) * +) + CX, (Math.sin (-angle) * +) + cy);            _.lineto ((Math.Cos (-angle) + CX, (Math.sin (-angle) *) + CY);     _.closepath ();       _.stroke ();        }, Path: [[' Arc ', ' 0, ']}, {width:100, height:50, Stepsperframe:1, Traillength:1, pointdistance:. 1, Fps:15, Padding:10,//step: ' Fad        Er ', fillcolor: ' #FF2E82 ', setup:function () {this._.linewidth = 20; }, Path: [[' Line ', 0, [+], [], [' line ', ' 0 ', ' + ']}, {Widt        h:100, height:100, Stepsperframe:7, Traillength:. 7, Pointdistance:., fps:30,        Setup:function () {this._.linewidth = 10; }, Path: [[' Line ', ' + ', ' + ', '], [' line ', ' + ', ' + ', ' + ', ' line ', 80, 70, 20 , []]}, {width:100, height:100, Stepsperframe:4, Traillength:1, PO Intdistance:. fps:25, FillColor: ' #FF7B24 ', SETup:function () {this._.linewidth = 10; }, Step:function (point, I, f) {var progress = point.progress, Degangle = Progres                s, angle = math.pi/180 * Degangle, Angleb = math.pi/180 * (degAngle-180),            size = i * 5;  This._.fillrect (Math.Cos (angle) * + (50-SIZE/2), Math.sin (angle) * + (50-size/            2), size, size);            This._.fillstyle = ' #63D3FF ';  This._.fillrect (Math.Cos (Angleb) * + (50-SIZE/2), Math.sin (Angleb) * + (50-size            /2), size, size);  if (point.progress = = 1) {This._.globalalpha = f<. 5? 1-f: F; This._.fillstyle= ' #EEE '; This._.beginpath ();                This._.arc (50, 50, 5, 0, 360, 0);                This._.closepath ();            This._.fill ();        }}, path: [[' Line ', Max, Max, Max]]}, {width:100, height:100, Stepsperframe:3, Traillength:1, pointdistance:. Fps:30, Step: ' Fader ', st Rokecolor: ' #D4FF00 ', setup:function () {this._.linewidth= 6; }, path: [[' Arc ', ' 0, ']}, {width:100, height:100,        Stepsperframe:1, Traillength:1, pointdistance:. fps:30, FillColor: ' #05E2FF ',            Step:function (point, Index) {this._.beginpath ();            This._.moveto (Point.x, POINT.Y);            This._.arc (Point.x, POINT.Y, index * 7, 0, Math.PI * 2, false);            This._.closepath ();        This._.fill ();        }, Path: [[' Arc ', ' 0, ']}, {width:100, height:100,        Stepsperframe:1, Traillength:1, pointdistance:. Strokecolor: ' #FF2E82 ', fps:20, Setup:function () {this._.linewidth= 4; }, Step:function (point, index) {var cx= this.padding+-Cy= this.padding+, _= This._,Angle= (Math.PI* (point.progress *), Innerradius= Index = = =1? 10:25;            _.beginpath ();            _.moveto (Point.x, POINT.Y);            _.lineto ((Math.Cos (angle) * Innerradius) + CX, (Math.sin (angle) * Innerradius) + CY            );            _.closepath ();        _.stroke ();        }, Path: [[' Arc ', 50, 50, 40, 0, 360]}]; var d, a, container= document.getElementById (' in '); For (var i=-1,L= loaders.length;++i < L;) {D= document.createelement (' div '); D.classname= ' l '; a= newSonic (Loaders[i]);            D.appendchild (A.canvas);            Container.appendchild (d); A.canvas.style.margintop= (-A.fullheight)/2 + ' px '; A.canvas.style.marginleft= (-A.fullwidth)/2 + ' px ';        A.play (); }

via:http://www.w2bc.com/article/26212

Loading effect based on HTML5 Canvas implementation