Circle Loading Animation In jQuery & CSS3 - shCircleLoader

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.