One of the most useful script.aculo.us functions has to be the morph function. You can use it to modify a CSS style over a set period of time, making it the perfect function for creating an animated progress bar for a JavaScript based RIA.

Below is a quick example showing how to use the morph function.

In this example I begin by creating a couple of quick graphics. The first is for the progress bar and a the second is transparent gif to act as a border and a masking agent for the progress bar. The gif image is not necessary, but it does give us a quick and easy way to create rounded corners for the progress bar.

After the graphics are saved, I create a simple html page with a div for the progress bar. I'll add some CSS to style the progress bar div as follows:

.progressBar
{
    width: 480px;
    height: 30px;
    background: url(progressBar.png) left no-repeat;
    padding: 0;
    margin: 0;
}

I then add a javascript reference to prototype.js and effects.js from scriptaculous.

Next, I add a dom:loaded event handler to initialize my progressbar. I also use the event to add the progress bar mask image. Then I set the background position to -480px (the length of the div). Finally I use the morph function to change the background position to 0px over a duration of 4 seconds.

below is the code:

document.observe("dom:loaded",function() {

    var pb = $('sampleProgressBar');

    pb.insert("<img src=\"progressBarMask.gif\" alt=\"progress bar\" />");

    pb.setStyle({backgroundPosition: '-480px'});

    pb.morph({backgroundPosition: '0px'}, { duration: 4 });

});

Read more from Jeremy Bierly.