jQuery Plugin To Create CSS3 Animated Spinners - jRoll

jRoll is a jQuery plugin which helps create customizable, animated spinners using SVG element and CSS3 animations. Great for loading spinner, ajax request indicator and more.

How to use it:

1. Add jQuery JavaScript library and the jQuery jRoll plugin's files into your webpages.

<link rel="stylesheet" href="jRoll.css">
<script src="jquery-3.0.0.slim.min.js"></script>
<script src="jRoll.js"></script>

2. Create a DIV element to place the spinner.

<div id="demo"></div>

3. Initialize the plugin and render a default spinner inside the DIV you just created.

$("#demo").jRoll();

4. The plugin comes with 14 animations you can choose from:

• heartbeat
• pulse
• slicedspinner
• halfslicedspinner
• gyroscope
• wave
• jumpdots
• hordots
• verdots
• spreaddots
• trailedspreaddots
• circledots
• squares
• 3Dsquares
• stackedsquares
• 3dots
• popdot
• eq
• waterdrop

$("#demo").jRoll({
  animation: "heartbeat"
});

4. More configuration options.

$("#demo").jRoll({
  animation: "heartbeat",
  radius: 100,
  colors: ['#046476','#29DCFF','#61FFD5']
});

Change log:

v0.1.6 (2016-06-29)

• added more animations

v0.1.5 (2016-06-26)

• added more animations

v0.1.4 (2016-06-20)

• added more animations

---

This awesome jQuery plugin is developed by fitsbach. For more Advanced Usages, please check the demo page or visit the official website.