Automatic loader at the top of page for complete the page load

Here i'm going to explain the simple design style like YouTube page loading at the top of the page, you can see when the YouTube page reloads that time one small red strip will be in the top of the page. here we are going to make that kind of page loaded effect using pace.min.js. Let's see the simple code for that.

LIVE DEMO

We have to include the pace.min.js file for the progress bar effect. it is completely works under css with the pace.min.js file. this combination works well for the effect. Let see code

JQUERY

<script src="js/pace.min.js"></script>

CSS CODE

<style type="text/css">
.pace {
  -webkit-pointer-events: none;
  pointer-events: none
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.pace-inactive {
  display: none;
}
.pace .pace-progress {
  background: #cb4437;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}
</style>

Like the above code there are few more effects are there.. we have to add the css code for that. LINK FOR MORE EFFECTS . GitHub LINK. I hope this will be really to use for designing. Thanks for visiting.

RELATED POSTS :
Floating menu using Jquery
Full screen API using JQuery
Create custom file chosen input type using Css and Jquery
Animated scroll to top by using Jquery
Image slider with random animation effects using Jquery
Image gallery with lightbox effect using Jquery
Drag and Drop Concept using Jquery
Dynamic Data Table using DataTable Jquery
Accordion toggle using Jquery with Bootstrap