How to add ajax-loading indicators

You are viewing revision #1 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version.

next (#2) »

With yii you're able to create ajax requests and updates easily. But most times you always want to show a loading indicatior to your user.

Here's a simple (and good looking) solution for yii. Basically we'll fade out all elements within a div to 80% opacity, while displaying a loading indicator in the background.

The advantage of this solution is, that you don't have to add extra markup to your page.

When performing the ajax request, add the .loading class to your, usually a div, element. And remove it when the request is complete.

array(
	 'ajax' => array(
		  'beforeSend' => 'function(){
					  $("#myDiv").addClass("loading");
				  }',
		  'complete' => 'function(){
					  $("#myDiv").removeClass("loading");
				  }',
		  )
 )

The very slim CSS part of this recepie: ~~~ [javascript] div.loading {

background-color: #eee;
background-image: url('loading.gif');
background-position:  center center;
background-repeat: no-repeat;
opacity: 1;

} div.loading * {

opacity: .8;

} ~~~

23 0
25 followers
Viewed: 75 509 times
Version: Unknown (update)
Category: Tutorials
Tags: AJAX
Written by: schmunk
Last updated by: Yang He
Created on: Sep 4, 2009
Last updated: 11 years ago
Update Article

Revisions

View all history

Related Articles