Circle Loading Animation In jQuery & CSS3 - shCircleLoader
File Size: | 7.15 KB |
---|---|
Views Total: | 1490 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

shCircleLoader is a jQuery plugin that uses CSS3 animations to create customizable and animated circle loading animations (also known as a loading spinner, loading indicator, and other terms).
See Also:
- 10 Best Loading Spinner Plugins In JavaScript And Pure CSS
- 80+ Best Pure CSS Loading Spinners For Front-end Developers
How to use it:
1. Include the minified version of the shCircleLoader plugin after jQuery.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/jquery.shCircleLoader-min.js"></script>
2. Create an empty container to hold the circle loading animation.
<div id="example"></div>
3. Initialize the plugin to create a default circle loading animation.
$(function(){ $('#example').shCircleLoader(); });
4. Customize the circle loading animation.
$('#example').shCircleLoader({ // border radius // "auto" - calculate from selector's width and height radius: "auto", dotsRadius: "auto", // color // "auto" - get from selector's color CSS property color: "auto", // number of dots dots: 12, // animation speed duration: 1, // clockwise or counterclockwise clockwise: true, // true - don't apply CSS from the script externalCss: false, // customize the animation keyframes: '0%{{prefix}transform:scale(1)}80%{{prefix}transform:scale(.3)}100%{{prefix}transform:scale(1)}', });
This awesome jQuery plugin is developed by sunhater. For more Advanced Usages, please check the demo page or visit the official website.