Time for action – creating an animated loader

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.

  1. 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>
  2. 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"); ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.