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

<script>
$( function() {
	$( '#loadingdots' ).loadingdots({ dots : 5 });
});
</script>

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.