Resolved Loading indicator question

durangod · 02-12-2013, 09:05 PM

I am doing a loader indicator (image with some text next to it) while the page loads.

But im not having so much success with it.

right after the body tag i have this

Code:

<div id="loading-mask"></div> 
 <div id="loading">
   <div class="loading-indicator"></div>
 </div>

Then right after that i have the js

Code:

<script type="text/javascript">
document.getElementById('loading-indicator').innerHTML = 'Loading file...';
</script>

The issue is that it comes up and displays but it just sits there, it does not end and load the page.

Not sure what i am mssing here or maybe i dont have this in the right place in the file. Should it go on the very bottom of the file?

sunfighter · 02-12-2013, 09:21 PM

Code:

document.getElementById('loading-indicator').innerHTML = 'Loading file...';

loading-indicator is not an ID it's a class.

And don't see where your loading anything. Is that somewhere else?

durangod · 02-12-2013, 09:29 PM

good eye i was cleaning it up and i removed the span because i had my own message and i honestly did not realize it was the id it should look like this

same js as above but this is dif

Code:

<div id="loading-mask"></div>
 <div id="loading">
    <div class="loading-indicator">
     <span id="loading-indicator">Loading. Please wait...</span>
    </div>
  </div>

see any issues here ?

Philip M · 02-12-2013, 09:44 PM

This may be useful:-

Code:

<html>
<head>

<style type = "text/css">
.styling{
background-color:black;
color:red;
font: bold 24px MS Sans Serif;
padding: 6px;
}
</style>

</head>


<body onload = "showLoad()">

<br><br>
<center>
<span id = "a" class = "styling"></span>
</center>

<script type = "text/javascript">
var num = 0;  
var tim;
var txt = "Loading, please wait ........";
document.getElementById("a").innerHTML = txt;

function showLoad() {
num ++;
if (num == 5) {  // erase after 5 seconds, adjust to suit
document.getElementById("a").style.display="none";
window.clearTimeout(tim);
}
else {
tim = window.setTimeout("showLoad()", 1000);
}
}

</script>


</body>
</html>

durangod · 02-12-2013, 09:47 PM

thanks all..