Features:
1. No image, no external CSS
2. No dependency (jquery supported, but not required)
3. configurable height
4. Resolution independence
5. VML is supported when the earlier version of IE is not supported.
6. Use the Key Frame Animation and setTimeout ()
7. compatible with various mainstream browsers, including IE6
8. MIT Authentication
Spin. js dynamically creates a progress bar, which can be replaced by loading GIF images using Ajax.
<Body> <Div id = "myspin"> </div> <SCRIPT src = "spin. JS "> </SCRIPT> <SCRIPT> var opts = {lines: 13, // Number of drawn lines length: 20, // length of each line width: 10, // width radius: 30, // the radius of the rounded corner of the line corners: 1, // corner roundness (0 .. 1) rotate: 0, // rotation offset direction: 1, // 1: clockwise,-1: counterclockwise color: '#000 ', // # RGB or # rrggbb or array of colors speed: 1, // speed/second trail: 60, // afterglow percentage shadow: false, // whether to display shadow hwaccel: false, // whether or not to use hardware acceleration classname: 'scheduler', // The class name zindex: 2e9 bound to the spinner, // The positioning layer (default: 2000000000) Top: 'auto', // located relative to the parent element, unit: Px left: 'auto' // left positioned relative to the parent element, unit: Px}; var target = document. getelementbyid ("myspin"); var spinner = new Spinner (OPTs ). spin (target) </SCRIPT> </body>
The spin () method initializes the necessary HTML elements and starts the animation. If the target element is passed as a parameter, the spinner is taken as the first
Child node, added to the parent node, horizontally and vertically centered.
Manual positioning:
The default value is horizontal and vertical center. We can manually configure the top and left in the initialization parameter to locate the target element.
To manually insert a spinner to a DOM node, call the spin () method without any parameters. Use the El attribute to access HTML elements. As follows:
VaR spinner = new Spinner (). Spin ();
Target. appendchild (spinner. El );
The returned result is a relatively positioned Div [class = "Spinner"] element with a height of 0. The center of the spinner is located in the upper left corner of the div.
Take a look at Firefox's:
Hide:
Call the stop () method to remove the spinner and stop the animation. You can use the spin () method to re-enable the animation.
New spinner (). Stop ();
New spinner (). Spin (); // enable the animation
Use of jquery plug-ins:
. FN. spin = function (OPTs) {This. each (function () {var $ this = $ (this), data = $ this. data (); If (data. spinner) {data. spinner. stop (); Delete data. spinner;} If (OPTs! = False) {data. spinner = new Spinner ($. extend ({color: effecthis.css ('color')}, opts )). spin (this) ;}}); return this ;}; instance: <body> <Div id = "myspin"> </div> <SCRIPT src = "jquery-1.8.3.min.js"> </SCRIPT> <SCRIPT src = "spin. JS "> </SCRIPT> <SCRIPT> $. FN. spin = function (OPTs) {This. each (function () {var $ this = $ (this), data = $ this. data (); If (data. spinner) {data. spinner. stop (); Delete data. spinner;} If (OPTs! = False) {data. spinner = new Spinner ($. extend ({color: effecthis.css ('color')}, opts )). spin (this) ;}}); return this ;}$ ("# myspin "). spin ({lines: 13, // number of lines drawn length: 20, // length of each line width: 10, // width radius: 30, // The radius of the rounded corner of the line corners: 1, // corner roundness (0 .. 1) rotate: 0, // rotation offset direction: 1, // 1: clockwise,-1: counterclockwise color: '#000 ', // # RGB or # rrggbb or array of colors speed: 1, // speed/second trail: 60, // afterglow percentage shadow: false, // whether to display shadow hwaccel: false, // whether or not to use hardware acceleration classname: 'scheduler', // The class name zindex: 2e9 bound to the spinner, // The positioning layer (default: 2000000000) Top: 'auto', // located relative to the parent element, unit: Px left: 'auto' // left positioned relative to the parent element, unit: Px}); </SCRIPT> </body>
Supported browsers:
Chrome
Safari 3.2 +
Firefox 3.5 +
IE 6, 7, 8, 9
Opera 10.6 +
Mobile Safari (IOS 3.1 +)
Android 2.3 +
The source code is as follows:
Use real-time functions, factory mode, Singleton mode, and other design modes. Adapt to commonjs
References:
Http://fgnass.github.io/spin.js/
Http://www.myjqueryplugins.com/jquery-plugin/spinjs
Https://github.com/fgnass/spin.js/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
