User Rating: 3.5/5 ( 2 votes)
shCircleLoader is a jQuery plugin, which helps web developers to create a variety of loading animations and integrate them easily into their web applications.
Features
-
Customizable animation controlled by a wide range of options.
-
Normally you do not have to include CSS file, but you can do this turning off CSS styling from the script.
-
CSS "namespaces" allows you to create different loading animations in one page.
-
Custom CSS keyframe animtion declarations.
-
Optional progress status in the center of the animation.
Compatibality
-
shCircleLoader is tested with jQuery versions 1.10.3 and 2.0.3 only, but it should work with other versions.
-
Modern browser supporting CSS animations is required. There are some problems with Opera browser.
Source: jquery.sunhater.com
1. INCLUDE JS FILES
<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="/your/path/to/jquery.shCircleLoader-min.js" type="text/javascript"></script>
2. HTML
<div id="loader" style="width: 100px; height: 100px"></div>
3. JAVASCRIPT
$('#loader').shCircleLoader();
4. OPTIONS
clockwise [Boolean] Default: true
Defines the direction rotation of the animation.
color [String] Default: "auto"
The color of the dots. If it is "auto" the color will be taken from the container div color CSS property.
dots [Integer] Default: 12
Dots count.
dotsRadius [Integer] Default: "auto"
The dots radius in pixels. If it is "auto" the script will calculate the radius, so dots canot be overlapped.
duration [Float] Default: 1
The duration of one loop of the animation in seconds.
externalCss [Boolean] Default: false
If it is set to true, the script will not apply any CSS properties to the animation elements. In this case you should take care for the whole CSS.
keyframes [String] Default: "0%{{prefix}transform:scale(1)}80%{{prefix}transform:scale(.3)}100%{{prefix}transform:scale(1)}"
Defines the dot animation keyframes. Look here for more information. You can use {prefix} to replace browser specific prefixes (like -moz-, -ms-, -webkit-). The script will use all prefixes defined in the uaPrefixes option.
namespace [String] Default: "shcl"
CSS namespace. Actualy it is CSS class, which can be used for custom CSS properties. This class will be applied to the animation container. The shcl class will be always applied, even you set the different namespace.
radius [Integer] Default: "auto"
Radius of the animation in pixels. If it is "auto", the radius will be calculated from the container width or height.
uaPrefixes [Array] Default: ['o', 'ms', 'webkit', 'moz', '']
Browser specific CSS prefixes.
JS Tutorial
