Home Web Development Bootstrap Solution to: What’s a quick and dirty “page loading” animation using jQuery?

Get social!

Note: This post falls under the category of, “too much information”. Sorry, just had my second cup of coffee and I’m feeling chatty.

I’ve recently developed an iOS app for a real estate company. It’s pretty nice, if I do say so myself. (If you want to try it out, you need a “location code”. Use 1926.)

Although I have programmed using the native Objective C/Xcode IDE prior to writing this app, I wanted to try something that would lend itself to the Android OS as well, without having to rewrite everything in Java. So I gave Appcelerator’s Titanium library (http://www.appcelerator.com/) a try.

The library and toolsets use Javascript as the programming language, and a modified version of Eclipse as the IDE. Unlike other, similar coding libraries touting a “one code for all platforms” maxim, the Javascript code is converted into native iOS calls, so the app’s interface looks and feels exactly like a native iOS app. I’m hooked on it! I can program about twice as fast as if using Xcode. I’m not sure if that is a result of the Appcelerator’s awesomeness or my own programming skills and limitations, but hey, whatever works.

My mistake, though, was to focus and test on just the iOS emulator while building the original app. I figured afterward I could make a few tweaks and the code would run fine on the Android OS. Wrong! I had included too many native iOS elements (navbars, system buttons, etc.). Attempting to update and test the code for use on the Android OS drove me to the point of drinking (OK, I was a drinker beforehand, but still).

For the Android OS, I was left with an extremely ugly, partially broken app that I could never deliver to the customer.

What to do?

I decided to use PhoneGap (now called Cordova, or not — http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-name/). I’ve used it before, on my very first app, and that came out OK. The library and it’s set of tools allows you to program for the iOS and Android (and other platforms) using web pages and javascript. I didn’t like this method as much because the calls to the native OS (at least the graphic functions) are not present. You are basically running a web page inside of a UIWebview (or whatever Androids’s version of a UIWebview is). Obviously there is more to it than this, but you can tell the difference, on the whole (and in my opinion).

Still, PhoneGap, er, sorry, Cordova might be a good choice for the Android OS, at least in this case (or so I figure now). With this in mind, I set out to create a mobile website that I could later add all the  device hooks (camera, contacts, etc.). I tried jQTouch and jQuery Mobile, but they really didn’t do it for me. I settled on my favorite web library, Bootstrap (Bootstrap 3 to be exact). I love it’s responsive design elements and cool navbars.

Anyway, I’m about half done with the app now, but the one thing that irks me is there is no page transition when clicking to a new page. I don’t think there is any such elements within the Bootstrap 3 library. I started to check into plugins and add-ons and the like, but finally settled on a very simple script using jQuery.


Keep in mind I am not referring to ajax load indicators, but full page loading indicators.

Load this html right after the <body> tag.

<!-- Loading page indicator. Note that corresponding javascript is in footer. -->
<div id="loading" style="display: table; position: absolute; top:0; left: 0; bottom: 0; height: 100%; width: 100%; z-index: 100000; background-color: #eee; text-align: center; font-size: 16pt;">
<div style="display: table-cell; vertical-align: middle;">

Load this javascript in the <head> (after the jQuery load). You can probably put it at the bottom of the page as well.

    <!-- Hide loading page. -->
    <script type="text/javascript">
    $(function() {
        $(document).ready(function() {
            $('#loading').animate({opacity: 0}, 2000);

That’s it. I realize it’s a very simple loading animation. The power in it is that you can add any kind of animation you want. Just replace the “animate” line with the appropriate code. Since I am using PHP on the server side, I just add the code via an “include()” statement.

When I get close to finishing the project, I’ll probably jazz up the animation a bit, but for now the code is just what the doctor ordered.

Here’s a simple example: https://www.xenabeast.com/examples/2013/09/loading-page.html

Bad Behavior has blocked 143 access attempts in the last 7 days.