Better-than-Google activity indicators with Rails

Posted by Frederic Jean Mon, 20 Feb 2006 02:46:37 GMT

The next time that you use your GMail account, look on the upper-right corner of the screen when you go from email to email. You'll notice that a red box shows up containing the word "Loading...". This is a very helpful indicator that GMail is in the process of doing something.

Mir.aculo.us has a great article on how to achieve a similar effect using an animated GIF image. You can achieve an even nicer effect by adding partials and Script.aculo.us effects.

First, make sure that the javascripts files are loaded by adding this to the head of your page: 

              1
              
<%= javascript_include_tag :defaults %>

This will force the default sets of javascripts files to load. These do include effects.js and application.js.

Next, create a file called application.js under public/javascripts if it doesn't already exists. Add this code: 

              1
              2
              3
              4
              5
              6
              7
              8
              9
              10
              11
              
Ajax.Responders.register({
                  onCreate: function() {
                      if($('loading') &#38;& Ajax.activeRequestCount>0) {
                          Effect.Appear('loading',{duration:0.5});
                      }  
                  },
                  onComplete: function() {
                      if($('loading') && Ajax.activeRequestCount==0)
                          Effect.Fade('loading', {duration:1.0});
                  }
              });

Then create a partial called _loading.rhtml: 

              1
              2
              3
              
<div id="loading" style="display: none;" class="loading">
                  <h2><img src="http://typo.fredjean.net/typo/images/load.gif">&nbsp;Loading...&nbsp;</h2>
              </div>

I also added the following CSS to my application's stylesheet: 

              1
              2
              3
              4
              5
              6
              7
              8
              
.loading {
                  background: rgb(250,250,250); 
                  border: solid 2px; 
                  vertical-align: middle; 
                  text-align: center; 
                  padding-left: 20px; 
                  padding-right: 20px;
              }

I finally included the partial at the bottom of my layout: 

              1
              
<%= render :partial => 'loading' %>

From that point on, I got a "loading" indicator each time I clicked on a link created through the link_to_remote helper method. No need to go ahead and add the effects to each invocations.

-- Fred

Technorati Tags: ,

Comments

Leave a response

Comments


(leave url/email »)