Fancy Animated Loading Spinner With jQuery - SavageLoaders

SavageLoaders is an easy-to-use jQuery plugin that lets you create fancy, animated, customizable loading spinners from any image you provide.

More features:

• 5 animation types: round, horizontal, rotate, rotateX, rotateY, pulse.
• Custom animation delay & direction.

How to use it:

1. Add references to jQuery library and the SavageLoaders plugin's files.

<link rel="stylesheet" href="savage-loader.css">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="savage-loader.js"></script>

2. Create a placeholder for the loading spinner.

<div id="example"></div>

3. Call the function on the placeholder element and specify the path to the image. That's it.

$('#example').savageLoader( {
  imageUrl: "image.png"
});

4. Create a horizontal loading bar.

$('#example').savageLoader( {
  imageUrl: "image.png",
  loaderType: "horizontal",
  imageCount: 10, // the number of images
  direction: "right", // or 'left'
  turnDelay: 50
});

5. Creating a rotating loading spinner.

$('#example').savageLoader( {
  imageUrl: "image.png",
  loaderType: "rotate", // or 'rotateX', 'rotateY'
  startAngle: 0,
  angleIncrement: 5
});

6. Creating a beating loading spinner.

$('#example').savageLoader( {
  imageUrl: "image.png",
  loaderType: "pulse",
  currentOpacity: 1,
  opacityIncrement: -0.1
});

7. Apply a hide effect to the default loading type.

$('#example').savageLoader( {
  imageUrl: "image.png",
  fadeType: "hide"
});

8. More configurations for all loading types.

$('#example').savageLoader( {
  imageUrl: "image.png",
  moveToNextDelay: 50,
  fadeDelay: 700
});

---

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