CODEWITHSUNDEEP
javascripthtmlperl
Surajit Mitra
Surajit Mitra

Reputation: 414

Display progress bar after form submit

document.onreadystatechange = function () {

    var state = document.readyState

    if (state == 'complete') {
        document.getElementById('interactive');
        document.getElementById('loading').style.visibility="hidden";
    }
}

#loading{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url("http://code.jquery.com/mobile/1.3.1/images/ajax-loader.gif") no-repeat center center rgba(0,0,0,0.25)
}

<div id="loading"></div>

I am using the code that I have pasted here to show a loader on page loading.

First of all I want to change this to a progress bar after form submit but am not getting any idea how to do that. And secondly this loader code that I am using is coming after the page loading is almost completed. Just before few seconds the loader is appearing, not after submitting the form.

I am using CGI script (Perl and HTML) to write my code which runs on server.

I have pasted a sample CGI code what I am using right now to generate HTML web page. You can see in the first line, I have included sleep of 5 seconds to let you know that in that place my code will be there to fetch data from database which will need 5-6 seconds of time and then according to the output it will print on web page. My only concern is that while fetching the data from database the web page keeps loading and not showing the loader that I have given in the first div, when all the fetching work is done then it is coming to the loader and showing for last 1-2 seconds. If I could put a progress bar while fetching (sleep(5) in this case), that would be the solution to my problem.

sleep(5);

print "Content-type:text/html\n\n";
print <<ENDOFTEXT;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Carousel Inside Modal - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script>
document.onreadystatechange = function () {
  var state = document.readyState
  if (state == 'complete') {
         document.getElementById('interactive');
         document.getElementById('loading').style.visibility="hidden";
  }
}
</script>
<style>
#loading{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url("http://code.jquery.com/mobile/1.3.1/images/ajax-loader.gif") no-repeat center center rgba(0,0,0,0.25)
}
</style>
</head>
<body>
<div id="loading"></div>

<div class="container">
    <h1 align="center"> Webpage loading is done ! </h1>
</div>

</body>
</html>


ENDOFTEXT

Upvotes: 1

Views: 5035

Answers (1)

Niklesh Raut
Niklesh Raut

Reputation: 34914

Your data loaded quickly that's you are not seeing loader. I added one small video and it seems working.

document.onreadystatechange = function () {
  var state = document.readyState
    if (state == 'complete') {
          document.getElementById('interactive');    
          document.getElementById('loading').style.visibility="hidden";
    }

  
}
#loading{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url("http://code.jquery.com/mobile/1.3.1/images/ajax-loader.gif") no-repeat center center rgba(0,0,0,0.25)
}
<div id="loading"></div>
<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

Comment if you are talking about any background loading like Ajax

Upvotes: 0

Related Questions