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

Easy To Customize jQuery Loading Indicator Plugin - babypaunch.spinner.js
File Size: 4.88 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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: "&#x21BB;"
});

8. Enable/disable the animated icon.

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

Change log:

2017-01-04

  • added animation option.

2016-12-08


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