In this example we'll create a simple animated loading indicator that we can start when a particular process is initiated, and stop once the process has completed.
Open up the template file that we just looked at and add the following
<button>to the<body>of the page (this should go before the<script>elements):<button id="go">Initiate the action</button>
Next, in the empty function in the second
<script>element at the bottom of the page, add the following code:var loader = $("<div></div>", { id: "loader" }).css("display", "none"), bar = $("<span></span>").css("opacity", 0.2), loadingInterval = null; for (var x = 0; x < 3; x++) { bar.clone().addClass("bar-" + x).appendTo(loader); } loader.insertAfter("#go"); function runLoader() { var firstBar = loader.children(":first"), secondBar = loader.children().eq(1), thirdBar = loader.children(":last"); firstBar.fadeTo("fast", 1, function(){ firstBar.fadeTo("fast", 0.2, function() { secondBar.fadeTo("fast", 1, function() { secondBar.fadeTo("fast", 0.2, function() { thirdBar.fadeTo("fast", 1, function() { thirdBar.fadeTo("fast", 0.2); }); }); }); }); }); }; $("#go").toggle(function() { loader.show(); loadingInterval = setInterval(function() { runLoader(); }, 1200); }, function() { loader.hide(); clearInterval(loadingInterval); });Save the file as
loading.htmlin the main project folder (jquery-animation). Finally, we'll need to add a few basic styles to the example. Create a new file in your text editor and add to it the following code:#loader { margin:10px 0 0 36px; } #loader span { display:block; width:6px; float:left; margin-right:6px; border:1px solid #336633; position:relative; background-color:#ccffcc; } #loader .bar-0 { height:15px; bottom:-20px; } #loader .bar-1 { height:25px; bottom:-10px; } #loader .bar-2 { height:35px; margin-right:0; }Save this file in the
cssfolder asloading.css.
The <button> hardcoded onto the page is used to show and hide the loading animation. This is done purely for the purpose of this example. In an actual implementation, we'd show the loading animation at the start of a load operation, when new content was being added to the page for example, and then hide it again once the operation was complete.
The first thing we do inside the outer function is set some variables. We create a new <div> element as a container for the loader, using an object literal as the second argument to the $() (jQuery()) method to give it an id of loader. We then set its style to display:none with jQuery's css() method so that it is not immediately visible.
We also create a new <span> element, which will be used as a template to create the three individual loading bars. We set its opacity to 0.2 (20% opaque), also using the css() method. jQuery normalizes this style for us so that it works correctly in Internet Explorer. The last variable, loadingInterval will be used to store the id of an interval so that we can clear the interval when we need to. We set this to null initially as the interval has not yet been set.
Once our variables have been defined and initialized, we then execute a short for loop, with just three iterations. Within this loop we clone the span element we created, give it a class name for styling purposes, and then append it to the container. Once the three loading bars have been added to the container, we insert the container after the <button>.
Next we define a function called runLoader. This is the function that will be repeatedly called by the interval. The function doesn't run until the button is clicked. Within this function we cache the selector for each of the three individual bars and then run a series of nested functions.
We first increase the first loading bar to full opacity using the fadeTo() jQuery animation method. This method takes a string indicating the speed of the animation as its first argument, the opacity that the element should be faded to as its second argument, and a callback function as the third argument. The callback function is executed as soon as the animation ends.
In the callback function, we then fade the first loading bar back to its original opacity of 0.2. We supply another callback function to this method call, and within this callback function we animate the second loading bar to full opacity, and then back to its original opacity. The process is repeated for the third loading bar.
Finally, we use the jQuery toggle() method to add two functions which will be executed alternately each time the <button> is clicked. In the first function, we show the loader and then set the interval that repeatedly calls the runLoader() function. In the second function, we hide the loader and clear the interval.
Thinking about what we discussed earlier regarding when and when not to use animations, when would be an appropriate time to use this animation?
a. When there is a browser-intensive operation taking place
b. When there is a delay between something being requested from the server and the request returning from the server, but where the processing required by the browser is minimal
c. As an alternative to a Flash animation
d. When animated GIF images are not supported
What arguments are used with jQuery's
fadeTo()method?a. An integer representing the ending opacity
b. An object containing configuration options for the animation
c. A string or integer representing the speed or duration of the animation as the first argument, the ending opacity of the target element, and optionally a callback function to be executed when the animation ends
d. No arguments are required
I mentioned that we could use the loading animation when making requests and waiting for a response. Try using it with jQuery's AJAX methods, showing the loader just before making the request, and hiding it again once the response has been processed. The JSONP example, which retrieves images of cats, on the jQuery website at http://api.jquery.com/jQuery.getJSON/) makes a great test case, although depending on the speed of your connection, the loader may not be visible for very long.