Click the button above for a test of the animation.
Using this script is very simple, these are the steps:
step.1 Copy the cursorloadbar.js file to a location on your website.
step.2 Add the <script type="text/javascript" src="cursorloadbar.js"></script> line within the <head></head> tags in your html code.
step.3 Add the <div id="loadbar" style="display: none; position: absolute; border: 1px solid #dddddd; padding: 3px; padding-left: 15px; padding-right: 7px; top: 400px; left: 400px; background: #ffff00; font-family: arial; font-size: 10px; font-weight: bold; color: #ff0000;"><b>loading...</b></div> , this can be customised using the style attribute only as everything inside the div tags gets overwritten.
step.4 To dispaly the loading bar you should use the cLoadBar.start('loadbar', 'loading message goes here') method before the actual opeartion that needs to be processed. To stop the loading animation you should use the cLoadBar.release() method on the callback function or in the part of the script that gets executed right after the process has finished (for example if you are preloading an image you can use the release() method on the onload event of the image).