Web Tutorial: The Wayang Progress Bar (Part 4/4)

We've reached the last part of this web tutorial, and in this one, we're going to make your Wayang Progress Bar load more realistically.

Realistic how?

Well, take a look at your bar. It moves very predictably. One pixel at a time, one percentage at a time, just as it's programmed to in the JavaScript. But in real situations, the page doesn't load like that. Sometimes it loads some things faster, sometimes it takes more time with other components. To simulate that, we're going to add a random element to your animation.

Change the following line in the process_loader() function of your JavaScript:

                function process_loader(varloadercontent)
                {
                    var inc=Math.floor((Math.random() * 50) + 1);
                    var marginleft = document.getElementById(varloadercontent).style.marginLeft;
                    marginleft=marginleft.replace("px","");
                    marginleft=parseInt(marginleft)+inc;

                    if (marginleft>=0)
                    {
                        document.getElementById(varloadercontent).style.marginLeft="-5px";
                        document.getElementById(varloadercontent+"_text").innerHTML="Loading 95%"+dots;
                    }
                    else
                    {

                        var percent=(((500+marginleft)/500)*100).toFixed(0);
                        document.getElementById(varloadercontent+"_text").innerHTML="Loading "+percent+"%"+dots;
                        document.getElementById(varloadercontent).style.marginLeft=marginleft+"px";
                    }
                }

Now reload. What do you see? Your progress bar now loads unpredictably. Sometimes it goes faster, and sometimes it goes slower. That's because the inc variable was originally set to 1. So your bar moved one pixel at a time. With this change, you've basically told your JavaScript to move the bar one to fifty pixels each time!

For more about JavaScript random number functions, click here. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

Final touch!

Now for the next bit of fun. Do you feel that your bar is moving a little jerkily? It probably wasn't obvious when it was moving one pixel at a time, but now that it surges forward up to fifty pixels any time, you can see it.

So let's smoothen the animation a bit. Add these lines to your CSS.

            .loader_content
            {
                width: 500px;
                height: 20px;
                background: #ff4444; /* Old browsers */
                background: -moz-linear-gradient(top, #ff4444 0%, #ff9e9e 52%, #ff4444 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff4444), color-stop(52%,#ff9e9e), color-stop(100%,#ff4444)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* IE10+ */
                background: linear-gradient(to bottom, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff4444', endColorstr='#ff4444',GradientType=0 ); /* IE6-9 */
                transition: margin-left 1s;   
            }

What we've done here is to tell your browser to render the changes incrementally over the space of one second, instead of moving your bar immediately. See what a difference this makes?

Here's an excellent tutorial on CSS3 Transitions. http://www.w3schools.com/css/css3_transitions.asp

And we're done!

The Wayang Progress Loader is meant for those situations where your HTML page is loading slowly (due to an image-intensive gallery or a very long-winded article) and you need the user to be patient.

Couldn't I just have done this in jQuery?

Dear Lord, please tell me you're joking. Of course you could have done it in jQuery or Mootools. But to load the jQuery library just to produce a simple piece of code like this? That's excessive. And nowhere as fun. Sure, you could have pulled this out of jQuery's long list of functions and utilities. But it would have saved you a couple minutes at best, and it isn't the same as knowing how to do it yourself.

Keep it real,
T___T