jQuery Plugin For Animated Ajax Loading Dots - loadingDots

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

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.