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:
supeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeer