Loading gif not in center of page

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();
    }

Answer

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>

Advertisement

Answer