Easy To Customize jQuery Loading Indicator Plugin - babypaunch.spinner.js

babypaunch.spinner.js is a really small jQuery plugin that generates a customizable loading / busy indicator to tell your user some background task is still running.

How to use it:

1. Include jQuery library and the minified version of the jQuery babypaunch.spinner.js plugin on the webpage.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="jquery.babypaunch.spinner.min.js"></script>

2. Create a container to place the loading indicator.

<div id="spin"></div>

3.Create a basic loading indicator as this.

("#spin").spinner();

4. Show / Hide the loading indicator.

$("#spin").show();
$("#spin").hide();

5. Customize the color of the loading indicator.

("#spin").spinner({
  color: "white"
});

6. Customize the color of the background overlay.

("#spin").spinner({
  background: "rgba(0,0,0,0.5)"
});

7. Use a different loading spinner.

("#spin").spinner({
  html: "↻"
});

8. Enable/disable the animated icon.

("#spin").spinner({
  spin: true
});

Change log:

2017-04-21

• added z-index.

2017-01-04

• added animation option.

2016-12-08

• JS update.

---

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