Loading gif not in center of page

Question

I found this very useful javascript code that helps me to show a loading gif and a message when the submit button is clicked but the content isn't showing in the center of my webpage.

I tried to center it on my pc by adjusting the Top and Left in the CSS code which works fine on pc but not on mobile.

How can I force both the loading gif and the message to the center of my webpage on pc and mobile?

See code below;

<form action=''method='POST' id="submitForm" runat="server"  onsubmit="ShowLoading()">
    
        
     
          <div class='item'>
<input name='Username' placeholder='Type username' required='' type='text'/>

<input name='Password' placeholder='Type password' required='' id="password-field" type='password'>
</div>
          
         
       
       <div class='question'>
          <center><p>Privacy Policy<span class='required'>*</span></p></center>
          <div class='question-answer checkbox-item'>
            <div>
             </div>        
             </div>
             </div>
        <div class='btn-block'>
          <button href='/' type='submit'  id="myButton">Proceed</button>
        </div>
      </form>

    function ShowLoading(e) {
        var div = document.createElement('div');
        var img = document.createElement('img');
        img.src = 'loading_bar.GIF';
        div.innerHTML = "Loading...<br />";
        div.style.cssText = 'position: fixed; top: 5%; left: 40%; z-index: 5000; width: 422px; text-align: center; background: #EDDBB0; border: 1px solid #000';
        div.appendChild(img);
        document.body.appendChild(div);
        return true;
        // These 2 lines cancel form submission, so only use if needed.
        //window.event.cancelBubble = true;
        //e.stopPropagation();
    }

Does this answer your question? [How to horizontally center an element](https://stackoverflow.com/questions/114543/how-to-horizontally-center-an-element) — idmean, Jan 15 '22 at 13:20

score 1 · Accepted Answer · answered Jan 15 '22 at 13:40

Do you mean to say this? Just use transform: translate(x,y). Please check the cssText if it feeds your need.

    <script>
      function ShowLoading(e) {
        var div = document.createElement("div");
        var img = document.createElement("img");
        // img.src = "loading_bar.GIF";
        div.innerHTML = "Loading...<br />";
        div.style.cssText =
          "position: fixed; top: 50%; left: 50%; z-index: 5000; width: 422px; text-align: center; background: #EDDBB0; border: 1px solid #000; transform: translate(-50%,-50%)";
        // div.appendChild(img);
        document.body.appendChild(div);
        return true;
        // These 2 lines cancel form submission, so only use if needed.
        //window.event.cancelBubble = true;
        //e.stopPropagation();
      }
      ShowLoading();
    </script>

yes this worked but the message is just stuck on my screen without me clicking the submit button. It is supposed to only appear after the submit button has been clicked. Thanks — Link, Jan 15 '22 at 14:01
just remove the ShowLoading() function that i used at the end of the script tag. — Milan Panta, Jan 15 '22 at 14:21

Loading gif not in center of page

1 Answers1