jQuery Plugin To Create CSS3 Animated Spinners - jRoll

jQuery Plugin To Create CSS3 Animated Spinners - jRoll
File Size: 26.5 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.