Spin.js-css Animation Progress Loader

Spin.js is a very simple CSS loader, he is a use of VML (Vector Makeup Language) CSS animation effect.

Spin.js the characteristics

He has a very strong adaptability and has the following features:

1. No additional images, no added external CSS files

2. There is no need to rely on other tools, and for jquery it supports jquery, but jquery is not required

3. highly configurable

4. independent of resolution

5. Browser compatibility is good, on the low version of IE , using VML support

6. using the @keyframe animation, on a browser that does not support @keyframe, use the settimeout ()

7. support all major browsers, including IE6

Spin.js the Use

Spin.js dynamic creation of progress bars, and is a circle progress animation, its high configuration can be configured to color, the width and length of the radiation, rotation is counterclockwise or clockwise, and the speed of rotation. You can set an array to store the properties of this progress bar:

1. var opts={

2. lines:11, // number of lines in the circle

3. Length: height of each line

4. width : Ten, // thickness of each line

5. radius: The radius of the fillet of each line

6. Corners: 1, // corner roundness, from 0 to 1

7. rotate: 0, // rotation offset

8. Direction: 1, // rotation direction, where 1 means clockwise, 0 is counterclockwise

9. Color: ' #FFF ', // color

speed : 1, // rotation rate in rpm per second

Trail : Percentage of the color change, // percent of the glow

Shadow: false, // whether to show Shadows

hwaccel: false, // Whether hardware acceleration is used

className: ' spinner ', // bind to spinner The class name on the

zIndex: 2e9, // positioning layer, default value is 2000000000

Top: ' auto ', // relative to parent element, in PX

. left : ' auto ' // relative to the parent element's position, in PX

. };

then it is very simple to use spin.js with jquery, simply by using the spin () method on the selected element, passing the setting set above as a parameter:

1. $ ("#loading"). Spin (opts);

It is also very easy to stop loading animations, just pass false as a parameter to the spin method to:

1. $ ("#loading"). Spin (false);

for jquery, Spin.js also provides simpler settings that can be passed into the tiny,small,large to simply set the size of the circle, its default setting, the line of the circle is 9, the length of each line is 10px, Width 20px. The settings for Tiny,small,large are as follows:

· Tiny: {lines:8, Length:2, Width:2, radius:3}

· Small: {lines:8, Length:4, Width:3, radius:5}

· Large: {lines:10, Length:8, Width:4, radius:8}

Spin.js the browser support

Spin.js support for all major browsers, including:

· Chrome

· safari3.2+

· firefox3.5+

· ie6,7,8,9

· opera10.6+

· Mobilesafari (IOS 3.1+)

· android2.3+

Spin.js the demo

In The example in this article, you can see the rotation progress bar in the demo, and when you click on the progress bar, the code passes the false parameter and stops and hides the progress bar.

for additional demos and library file downloads, see It online education platform-- Wheat Academy

Any questions, you can contact me ~

Spin.js-css Animation Progress Loader