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="/?originalUrl=https%3A%2F%2Fwww.jqueryscript.net%2F%26quot%3B%2Fpath%2Fto%2Fcdn%2Fjquery.slim.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%26lt%3Bscript%2520src%3D%26quot%3B%2Fpath%2Fto%2Fjquery.shCircleLoader-min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%253C%2Fpre">
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.





Prev: Minimal Custom Loading Overlay Plugin For jQuery 
Next: Preload Content When Hovering Over Links - jQuery smartPreload