AJAX Loading Spinner Animation in HTML Title

Today I will tell you the right method of how to use AJAX Loading Spinner Animation in HTML Title.

The HTML Title is used as an AJAX Loading indicator in this web programming example. Because good enough is never good enough, it also features a text-based animation effect that can be activated with some simple javascript programming ;-).
We recently looked into ways to add pizazz to an AJAX application by animating a loading spinner.

The “loading spinner” is a short animation that alerts a user that an activity requiring a (hopefully brief) wait time is now underway. If a user presses a button that initiates a background server call (as in an AJAX scenario), the app should provide visual feedback to the user indicating that the request is in progress.

AJAX Loading Spinner Animation Demo Sample

ajax coding

Title Spinner Example Code

<form name="my_form" action="#" onsubmit="return false;"> <pre id="my_console" style=" border: 1px dotted #aaa; float:right; width:300px; height:150px; overflow-y:scroll; ">(Debugging Console) </pre> <table class="widget"> <tbody><tr> <td>Title</td> <td><input type="text" name="title" value="" onchange="init()"></td> </tr> <tr> <td>Loading Message</td> <td><input type="text" name="loading_message" value="Loading..." onchange="init()"></td> </tr> <tr> <td>Character Animation</td> <td><input type="text" name="char_anim" maxlength="1" value="_" onchange="init()"></td> </tr> <tr> <td>Interval (milliseconds)</td> <td><input type="text" name="anim_interval" value="30" onchange="init()"></td> </tr> <tr> <td>Ending Pause (ex. 0-30)</td> <td><input type="text" name="starting_point" value="15" onchange="init()"></td> </tr> <tr> <td colspan="2" align="right"> <input type="button" value="Run 5 Seconds" onclick=" init(); doAnimation(); setTimeout(function(){ doAnimation(1); },5000); return false; "> <input type="button" value="Start Animation" onclick="init(); doAnimation(); return false"> <input type="button" value="Stop Animation" onclick="doAnimation(1); return false"> </td> </tr> </tbody></table> </form> <script> // read/set form values for the spinner properties var f = document.my_form; f.title.value = document.title; f.loading_message = 'Loading'; f.char_anim = '.'; String.prototype.replaceAt = function(idx, char) { // replaceAt based on a suggestion from http://stackoverflow.com/users/173347/cem-kalyoncu // appears the question being answered was here... // http://stackoverflow.com/questions/1431094/how-do-i-replace-a-character-at-a-particular-index-in-javascript return this.substr( 0, idx ) + char + this.substr( idx + char.length ); } function init() { var f = document.my_form; window.animObj = { 'loading' : f.loading_message.value,    // || '_loading_', 'title'   : f.title.value,              // || document.title, 'char'    : f.char_anim.value,          // || '.', 'x'       : 0, 'wait_for': Math.abs( parseInt( f.starting_point.value ) ) * -1 }; log('init/update anim object props'); } function log( msg ) { var el = document.getElementById('my_console'); el.innerHTML += '\n&gt;' + msg; el.scrollTop = el.scrollHeight; // auto scroll to message } function doAnimation( stopit ) { if( !window.animObj && !stopit ) { init(); } if ( stopit ) { log('stop request'); if ( window.animationTimer ) { clearInterval( window.animationTimer ); window.animationTimer = null; document.title = window.animObj['title']; log('stopping timer'); return; } return; } if ( !window.animationTimer ) { log('initializing timer'); window.animationTimer = setInterval( function(){ doAnimation(); }, document.my_form.anim_interval.value ); } var txt = new String( window.animObj['loading'] ); var x = window.animObj['x']++; if( x > window.animObj['loading'].length ) { window.animObj['x'] = window.animObj['wait_for']; x = window.animObj['wait_for']; } if ( x > -1 && x < window.animObj['loading'].length ) { txt = txt.replaceAt( x, window.animObj['char'] ); document.title = txt; } else document.title = window.animObj['loading']; } </script>

%d bloggers like this: