How to create a Loading Indicator...
While I use Ext JS to do it on my demo, here is how to do it using plain old javascript:
- Create a div element which has width and height 100% at the beginning of your page.
- Include an animated gif in a floating div to make it look like something is happening.
- Include the rest of your page and javascript below the div.
- Delete the div and image after a short delay using some javascript at the end of the page.
<html lang="en-au">
<head>
<title>Page loading indicator</title>
<!-- standard stylesheets -->
<style type="text/css">
/*Loading Indicator*/
#loading-mask{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:20000;
background-color:white;
}
#loading{
position:absolute;
left:45%;
top:40%;
padding:2px;
z-index:20001;
}
#loading .loading-indicator{
background:white;
color:#555;
font:bold 13px tahoma,arial,helvetica;
padding:10px;
margin:0;
text-align:center;
height:auto;
}
</style>
<script type="text/javascript">
function removeElementById(el) {
var node = document.getElementById(el);
if (node) {
node.parentNode.removeChild(node);
}
}
function removeLoading() {
removeElementById("loading");
removeElementById("loading-mask");
}
</script>
</head>
<body>
<div id="loading-mask" style=""></div>
<div id="loading">
<div class="loading-indicator"><img src="http://extjs.cachefly.net/ext-2.3.0/resources/images/default/shared/large-loading.gif" width="32" height="32" style="margin-right:8px;" align="absmiddle"/>Loading...</div>
</div>
<!-- include everything, including scripts after the loading indicator -->
<p>Here is some content that will appear when the loading indicator has been removed.</p>
<script type="text/javascript">
setTimeout("removeLoading()",250);
</script>
</body>
</html>
7 comments:
Very nice simple loading indicator. I also created a loading page that also disables the webpage while loading. See the example here: http://blog.whitehorses.nl/2009/10/13/progress-dialog-in-oracle-apex/
Hi Mark,
Thanks very much for the example, I did finally manage to the ExtJS method working, similar to the way you have used it on your site.
I do have another question for you though, regarding ExtJS ItemSelectors in ApEx. Have you ever managed to get this working? I can get it working in standalone HTML, but as soon as I put the code into an ApEx page I get an error "this[name] is null". This is true in FF and IE6+, however Chrome does allow it to work!
I was using the example ItemSelector/MultiSelect code from the ExtJS Examples. Very strange, but I have a funny feeling it may be conflicting with something in the seeded ApEx Javascript.
Any ideas would be much appreciated as I have spent the last few days pulling my hair out over this!
Cheers.
Cj
Hi CJ
Haven't played with ItemSelectors.
Would have to see your code to offer any suggestions. If you put up a demo on the Apex site happy to look at it.
Hi Mark,
I have created an example on apex.oracle.com:
http://apex.oracle.com/pls/apex/f?p=41697:1:
If you look at it in Chrome first, you will see it displays correctly and works exactly as expected. If you view it in FireFox, only the multiselector is displayed and the error "this[a] is null" is returned by FireBug. Viewing in Internet Explorer shows neither the ItemSelector or the MultiSelector.
If you take a look at http://www.swiftwind.co.uk/ext/examples/multiselect/multiselect-demo.html you will see the exact same code, outside of Apex works perfectly with all of the above browsers...
Very very strange, but any insight you may be able to give me would be greatly appreciated.
Many Thanks
Cj
Apologies, the link to the ExtJS example outside of ApEx was incorrect in my post. The correct link is:
http://www.swiftwind.co.uk/ext/examples/multiselect/multiselect-demo.html
Hi - I've tried this example, however some APEX items (Select List, Shuttle) are not being hidden while my loading indicator is shown though the rest of my page is hidden.
Any suggestions?
Thanks Brian
Hi Brian
If you have items showing through it could be:
- the loading mask is not the first element
- you are using absolute positioning for your items
If you set up a test example, I could check it out.
Mark
Post a Comment