jQuery Plugin To Show A Loading Indicator Using Dots - dot.js

dot.js is a simple lightweight jQuery plugin to show a loading indicator using dots. 

It uses the fadeTo method from jQuery to ensure a cross-browser experience.

See Also:

• 10 Best Loading Spinner Plugins In JavaScript And Pure CSS

How to use it:

1. Load the minified version of the dot.js plugin after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dot.min.js" defer></script>

2. Create a container for the loading dots.

<div id="loadingdots"></div>

3. Initialize the plugin to display the animated dots inside the container you just created.

$(function(){
  $('#loadingdots').loadingdots();
});

4. Set the duration of the animation. Default: 250ms.

$(function(){
  $('#loadingdots').loadingdots({
    duration: 500
  });
});

5. Apply you own CSS styles to the dots.

.dot {
  background: #000;
  float: left;
  height: 25px;
  margin-left: 5px;
  width: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  opacity: 0;
}

---

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