jQuery Plugin For Animated Ajax Loading Dots - loadingDots

jQuery Plugin For Animated Ajax Loading Dots - loadingDots
File Size: 4.61KB
Views Total: 5165
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

loadingDots is a super simple and cross-browser jQuery plugin that displays animated loading dots for ajax content loading.

How to use it:

1. Include jQuery library and jQuery loadingDots plugin on your html page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="dot.js"></script>

2. Markup

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

3. The CSS for loading dots

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

4. Call the plugin with a bit options

$( function() {
	$( '#loadingdots' ).loadingdots({ dots : 5 });

Change Log:

v0.2.0 (2013-05-07)

  • Some code improvements. Fixing error with the animation of the dots.

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