Spin.js-css Animation Progress Loader

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

Spin.js the characteristics

He has a strong adaptability. There are several features:

1. no additional images. There are no external CSS files added

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

3. Very high configurable

4. independent of resolution

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

6. @keyframe animations are used . On browsers that do not support @keyframe, use settimeout ()

7. support for all major browsers. Contains IE6

Spin.js the Use

Spin.js dynamically create a progress bar. And it's a circle progress animation, and its high-profile table is now capable of configuring colors. The width and length of the radiation, whether the 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 means 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 combining jquery with Spin.js is easy, just need to use the spin () method on the selected element. The settings set above are passed in as a number of parameters:

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

It 's also easy to stop loading animations. Simply passing false as a parameter to the spin method can:

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

for jquery, Spin.js also provides a simpler setting that can be passed into the tiny,small,large to simply set the size of the circle, whose default setting is 9 lines in the circle. The length of each line is 10px. Width 20px. For tiny. Small Large settings such as the following:

· 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 Demo sample in this article, you can see the rotation progress bar in the demo, and when you click on the progress bar. The code passes in a false argument. Stop and hide the progress bar.

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

No matter what the problem, can contact me ~

Spin.js-css Animation Progress Loader