Want To Be A Blogger  →  Start A Blog  →  Increase Traffic  →  Make Money Online  →  Recommended Things

Display Progress Bar While Page Loads Using jQuery

Friday, Dec 15, 2017

Tags:- jQuery JavaScript CSS


Progress Bar is used to track the progress of the current process it can be used anywhere like file upload process,page load process etc.In this tutorial we will create and display progress bar while page is loading using jQuery and CSS.You may also like Display Preloading Image On Image Loading Using jQuery


See Demo
Progress Bar While Page Load


To Create Progress Bar While Page Load it takes only three step:-

  1. Make a HTML file and define markup for progress bar
  2. Make a js file and define scripting for progress bar
  3. Make a CSS file and define styling for progress bar


Step 1.Make a HTML file and define markup for progress bar

We make a HTML file and save it with a name progress.html

<html>
<head>
  <script src="jquery.js" type="text/javascript"></script>
  <script src="progress.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="progress_style.css">
</head>
<body>
  <div class='progress' id="progress_div">
    <div class='bar' id='bar1'></div>
    <div class='percent' id='percent1'></div>
  </div>
  
  <div id="wrapper">
    <div id="content">
      <h1>Display Progress Bar While Page Loads Using jQuery<p>TalkersCode.com</p></h1>
    </div>
  </div>
  
  <input type="hidden" id="progress_width" value="0">
</body>
</html>

In this step we create divs for progress bar and create a hidden element to store the width of progress bar which will be updated as the element of webpage loaded successfully.You may also like display loading image while page loads.



Step 2.Make a js file and define scripting for progress bar

We make a js file and save it with a name progress.js

document.onreadystatechange = function(e)
{
  if(document.readyState=="interactive")
  {
    var all = document.getElementsByTagName("*");
    for (var i=0, max=all.length; i < max; i++) 
    {
      set_ele(all[i]);
    }
  }
}

function check_element(ele)
{
  var all = document.getElementsByTagName("*");
  var totalele=all.length;
  var per_inc=100/all.length;

  if($(ele).on())
  {
    var prog_width=per_inc+Number(document.getElementById("progress_width").value);
    document.getElementById("progress_width").value=prog_width;
    $("#bar1").animate({width:prog_width+"%"},10,function(){
      if(document.getElementById("bar1").style.width=="100%")
      {
        $(".progress").fadeOut("slow");
      }			
    });
  }

  else	
  {
    set_ele(ele);
  }
}

function set_ele(set_element)
{
  check_element(set_element);
}

In this step we use document.onreadystatechange function to find the document state and if state is 'interactive' we get all the dom elements and by using for loop to call the set_ele function.In set_ele function it call the check_element function.

In check_element function all the main process occurs it first get all the element of dom and divide 100 by number of elements to increase the width of progress bar.And then we check if the element is loaded or not if the element is loaded we increase progress bar width and change the value of hidden element which holds the progress bar width value and after that it check if the width is 100% then it means all the elements is loaded then it simply fades out and display the page content.You can also view our File Upload Progress Bar



Step 3.Make a CSS file and define styling for progress bar

We make a CSS file and save it with a name progress_style.css

body
{
margin:0px; auto;
padding:0px;
font-family:helvetica;
}
.progress 
{
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 9999;
 background-color: #F2F2F2;
}
.bar 
{ 
  background-color: #819FF7; 
  width:0%; 
  height:5px; 
  border-radius: 3px; 
}
.percent 
{ 
  position:absolute; 
  display:inline-block; 
  top:3px; 
  left:48%; 
}
#wrapper
{
  width:995px;
  padding:0px;
  margin:0px auto;
  font-family:helvetica;
  text-align:center;
}
h1
{
  text-align:center;
  font-size:35px;
  margin-top:60px;
  color:#A9BCF5;
}
h1 p
{
  text-align:center;
  margin:0px;
  font-size:18px;
  text-decoration:underline;
  color:grey;
}

Thats all, this is how to Display Progress Bar While Page Loads Using jQuery and CSS.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.