Tuesday, July 23, 2024
HomejQueryCircle Loading Animation In jQuery & CSS3 - shCircleLoader

Circle Loading Animation In jQuery & CSS3 – shCircleLoader

shCircleLoader is a jQuery plugin that makes use of CSS3 animations to create customizable and animated circle loading animations (also called a loading spinner, loading indicator, and different phrases).

See Additionally:

The right way to use it:

1. Embody the minified model 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 carry the circle loading animation.

<div id="instance"></div>

3. Initialize the plugin to create a default circle loading animation.


4. Customise the circle loading animation.


  // border radius
  // "auto" - calculate from selector's width and peak
  radius: "auto",
  dotsRadius: "auto",

  // shade
  // "auto" - get from selector's shade CSS property
  shade: "auto",

  // variety of dots
  dots: 12,

  // animation velocity
  period: 1,

  // clockwise or counterclockwise
  clockwise: true,

  // true - do not apply CSS from the script
  externalCss: false, 

  // customise the animation
  keyframes: '0%{{prefix}remodel:scale(1)}80%{{prefix}remodel:scale(.3)}100%{{prefix}remodel:scale(1)}',

This superior jQuery plugin is developed by sunhater. For extra Superior Usages, please examine the demo web page or go to the official web site.



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments