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.

$(perform(){
  $('#instance').shCircleLoader();
});

4. Customise the circle loading animation.

$('#instance').shCircleLoader({

  // 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.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments