loadingDots is a jQuery plugin for showing loading points across the browser.

loading dots css, loading dots animation, 3 dot loading animation css loading dots text, css loading dots

Fullscreen Loading Indicator Component For Vue.js

How to make use of 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 mount points.

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

3. Configure the plugin to display moving points inside the container you just created.

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

4. Set animation duration.

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

5. Apply your own CSS styles to the points.

.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;
}

jQuery Plugin To Show A Loading Indicator Using Dots, loadingDots Github

See Demo And Download

Official Website(midudev): Click Here

This superior jQuery/javascript plugin is developed by midudev. For extra Advanced Usages, please go to the official website.