Windows 8 Style Page Loader with CSS3 and jQuery

A full-width and fully responsive page loader at the top of your web page, built with jQuery and CSS3 transitions and inspired by Windows 8 UI.

How to use it:

1. Create the Html for a page loader at the top of the web page.

<div class="loader">
  <span class="l-1"></span>
  <span class="l-2"></span>
  <span class="l-3"></span>
  <span class="l-4"></span>
  <span class="l-5"></span>
  <span class="l-6"></span>
</div>

2. The required CSS styles for the page loader.

.loader {
  z-index: 99;
  position: fixed;
  top: 10px;
  width: 100%;
}

.loader > span {
  display: inline-block;
  background: #dbdbdb;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  margin: 0px;
  position: fixed;
  top: 12px;
  left: -10%;
  transition: 2.8s all cubic-bezier(0.030, 0.615, 0.995, 0.415);
  -o-transition: 2.8s all cubic-bezier(0.030, 0.615, 0.995, 0.415);
  -ms-transition: 2.8s all cubic-bezier(0.030, 0.615, 0.995, 0.415);
  -moz-transition: 2.8s all cubic-bezier(0.030, 0.615, 0.995, 0.415);
  -webkit-transition: 2.8s all cubic-bezier(0.030, 0.615, 0.995, 0.415);
  z-index: 101;
}

.loader > span.jmp {
  transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  -moz-transition: none !important;
  -webkit-transition: none !important;
}

.loader span.l-1 { background: #e74c3c; }

.loader span.l-2 { background: #e67e22; }

.loader span.l-3 { background: #f1c40f; }

.loader span.l-4 { background: #2ecc71; }

.loader span.l-5 { background: #3498db; }

.loader span.l-6 { background: #9b59b6; }

3. Include the latest version of jQuery javascript library at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

4. The sample Javascript to active the page loader.

jQuery("document").ready(function($){
var _pageWidth = $("body").outerWidth();
var _timing = _pageWidth + 3500;
  $(".loader span").each(function (i) {
    // store the item around for use in the 'timeout' function
    var _item = $(this); 
    // execute this function sometime later:
    setTimeout(function($) { 
      _item.removeClass("jmp");
      _item.css({"left": '110%'});
      /* console.log("loop"); */
    }, 180*i); //move each dot one after the other, transition handled by CSS
    setTimeout(function($) { 
      _item.addClass("jmp");
      _item.css({"left": '-10%'});
      /* console.log("de-loop"); */
    }, 3000 + 180*i); //move each dot one back to start in order, transition removed via <.jmp> class
}); //RUN ONCE OUT OF LOOP, AVOID DELAY
  
$("window").resize(function(){
var _pageWidth = $("body").outerWidth();
var _timing = _pageWidth + 3500;
});
  
  
var _pageLoader = setInterval(function(){
$(".loader span").each(function (i) {
    // store the item around for use in the 'timeout' function
    var _item = $(this); 
    // execute this function sometime later:
    setTimeout(function($) { 
      _item.removeClass("jmp");
      _item.css({"left": '110%'});
      /* console.log("loop"); */
    }, 180*i); //move each dot one after the other, transition handled by CSS
    setTimeout(function($) { 
      _item.addClass("jmp");
      _item.css({"left": '-10%'});
      /* console.log("de-loop"); */
    }, 3000 + 180*i); //move each dot one back to start in order, transition removed via <.jmp> class
});
}, _timing);
});

---

This awesome jQuery plugin is developed by thetwistedtaste. For more Advanced Usages, please check the demo page or visit the official website.