Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,383
    Thanks
    264
    Thanked 32 Times in 31 Posts

    Loading indicator question

    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?
    Last edited by durangod; 02-12-2013 at 09:48 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,182
    Thanks
    23
    Thanked 603 Times in 602 Posts
    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?

  • Users who have thanked sunfighter for this post:

    durangod (02-12-2013)

  • #3
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,383
    Thanks
    264
    Thanked 32 Times in 31 Posts
    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 ?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,992
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    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>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    durangod (02-12-2013)

  • #5
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,383
    Thanks
    264
    Thanked 32 Times in 31 Posts
    thanks all..


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •