Web pages takes time to load and when page is heavy then it takes more time to load. Would it not be nice to show loading icon. It creates responsive webpage and gives nice user experience.In this post, I will show you a plugin to show loading icon.
Manual positioning
By default the spinner is centered within the target element. Alternatively you may specify a top and left option to position the spinner relative to the target element.
Hiding the spinner
To hide the spinner, invoke the stop() method, which removes the UI elements from the DOM and stops the animation. Stopped spinners may be reused by calling spin() again.
Features
- No images, no external CSS
- No dependencies (jQuery is supported, but not required)
- Highly configurable
- Resolution independent
- Uses VML as fallback in old IEs
- Uses @keyframe animations, falling back to setTimeout()
- Works in all major browsers, including IE6
- MIT License
How to use it?
var opts = { lines: 13, // The number of lines to draw length: 7, // The length of each line width: 5, // The line thickness radius: 21, // The radius of the inner circle rotate: 90, // The rotation offset color: '#000', // #rgb or #rrggbb speed: 2, // Rounds per second trail: 93, // Afterglow percentage shadow: false, // Whether to render a shadow hwaccel: false, // Whether to use hardware acceleration className: 'spinner', // The CSS class to assign to the spinner zIndex: 2e9, // The z-index (defaults to 2000000000) top: 'auto', // Top position relative to parent in px left: 'auto' // Left position relative to parent in px }; var target = document.getElementById('foo'); var spinner = new Spinner(opts).spin(target); The spin() method creates the necessary HTML elements and starts the animation. If a target element is passed as argument, the spinner is added as first child and horizontally and vertically centered.Manual positioning
By default the spinner is centered within the target element. Alternatively you may specify a top and left option to position the spinner relative to the target element.
Hiding the spinner
To hide the spinner, invoke the stop() method, which removes the UI elements from the DOM and stops the animation. Stopped spinners may be reused by calling spin() again.
Browser Compatibility
- Chrome
- Safari 3.2+
- Firefox 3.5+
- IE 6,7,8,9
- Opera 10.6+
- Mobile Safari (iOS 3.1+)
- Android 2.3+
No comments:
Post a Comment