We Created an Activity Indicator jQuery Plugin That Is Supposed to Be Easy to Use

In our day to day web development sometimes we need to indicate that something is being processed, in a nice/polite manner.
Most of the time that occurs when we invoke Ajax calls that are supposed to retrieve data and populate containers with HTML elements.

Usually, the process involves adding a Javascript jQuery Plugin and a CSS file to the page in case.

We spent a whole day trying to build everything with just Javascript.
Of course that involves injecting some content inside the busy container.

Take a look at our activity indicator demo.
It supposed to be flexible and work with any kind of html element.

To see it at work, click on any of the blue-ish boxes (sorry, I’m a guy :)).
The first one should start right away (on load).
Click one more time to hide the indicators.

To use it in a page, just refer the script file:

<script src="jquery.activity.js"></script>

Then you can place an indicator inside a container by simply calling:

$(selector).activity('show', {
    color : '#369'
});

In our example, we triggered the indicator display at click

$(function() {
	$(document).on('click', 'ul.activities li', function(event) {
		var container = $(event.target)[0];
		$(this).activity('show', {
			color : '#F57D23'
		});
	});
	//$('ul.activities li').activity('show');
});

As a bonus, you can change the moving parts of the SVG animation by specifying color as an option when calling “show” (see above, with #F57D23).

download jquery.activity.js here.