✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Display Progress Bar While Page Loads Using jQuery

Last Updated : Jul 1, 2023

IN - jQuery JavaScript CSS | Written & Updated By - Riya

In this tutorial we will create and display progress bar while page is loading using jQuery and 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.

You may also like Display Preloading Image On Image Loading Using jQuery

Display Progress Bar While Page Loads Using jQuery

CHECK OUT THIS TUTORIAL LIVE DEMO →

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.

I hope this tutorial on automatic page load progress bar helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪