Page load Progress bar for your website / webpage

You might have seen a lot of popular websites showing a progress bar while the website or a web page is loading. It is user-friendly because the user will know how much of the entire page is loaded and how much is left.

In this tutorial I’m going to use a popular javascript called “pace.js“, this script is very simple to implement and the important thing is, this script does not require a jQuery library!!

Click here to download the script and in the same page you can see number of examples.

Here is my example usage of the ‘page.js’:

<html>
<head>
<script src="pace.min.js"></script>
<style>
.pace .pace-progress {
  background: #29d;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 2px;

  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.pace-inactive {
  display: none;
}
</style>
<body>
<h3>Amazing top progress bar for your website / pages</h3>
<iframe src="https://snapwidget.com/in/?h=YW1hemluZ3xpbnwxMjV8M3wzfHx5ZXN8NXxmYWRlSW58b25TdGFydHxubw==&v=4414" title="Instagram Widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:420px; height:420px"></iframe>
</body>
</html>

You can also see the demo or download of the above example:

demo download

One thought on “Page load Progress bar for your website / webpage

Leave a Reply

Theme: Overlay by Kaira
Agurchand