page loader

by Talsja

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<body >
  <main>
   <div class="pace">
        <div class="bar">
            <div class="bg-aero-500"></div>                  
            <div class="bg-aero-300"></div> 
          <div class="bg-aero-200"></div> 
        </div>
    </div>
  </main>
</body>

SCSS

body { 
  background: #f2f2f2
}

.bg-aero-500 {
  background-color: #2C93A2;
}
.bg-aero-300 {
  background-color: #5AB6C3;
}
.bg-aero-200 {
  background-color: #AFDAE2;
}

.pace {
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	pointer-events: none;

	.bar {
		left: 0;
		background: color("aero","100");
		height: 5px;
		position: fixed;
		right: 100%;
		top: 0;
		width: 100%;
		z-index: 2000;

		div {
			top: 0;
			left: 0;
			width: 100%;
			position: fixed;
			height: 5px;
			right: 100%;
			-moz-transform: scaleX(1);
			-ms-transform: scaleX(1);
			-o-transform: scaleX(1);
			-webkit-transform: scaleX(1);
			transform: scaleX(1);
			-moz-animation: pace 2s infinite backwards ease-out;
			-o-animation: pace 2s infinite backwards ease-out;
			-webkit-animation: pace 2s infinite backwards ease-out;
			animation: pace 2s infinite backwards ease-out;

			&:nth-child(1) {
				-moz-animation-delay: -1.5s;
				-o-animation-delay: -1.5s;
				-webkit-animation-delay: -1.5s;
				animation-delay: -1.5s;
			}

			&:nth-child(2) {
				-moz-animation-delay: -1s;
				-o-animation-delay: -1s;
				-webkit-animation-delay: -1s;
				animation-delay: -1s;
			}

			&:nth-child(3) {
				-moz-animation-delay: -.5s;
				-o-animation-delay: -.5s;
				-webkit-animation-delay: -.5s;
				animation-delay: -.5s;
			}
		}
	}
}
.pace-inactive {
    display: none;
}

@keyframes pace{
	0% {
		-moz-transform: scaleX(0);
		-ms-transform: scaleX(0);
		-o-transform: scaleX(0);
		-webkit-transform: scaleX(0);
		transform: scaleX(0);
		z-index: 15;
	}
	22% {
		-moz-transform: scaleX(0);
		-ms-transform: scaleX(0);
		-o-transform: scaleX(0);
		-webkit-transform: scaleX(0);
		transform: scaleX(0);
		z-index: 15;
	}
	50% {
		-moz-transform: scaleX(1);
		-ms-transform: scaleX(1);
		-o-transform: scaleX(1);
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}
	90% {
		-moz-transform: scaleX(1);
		-ms-transform: scaleX(1);
		-o-transform:...

JavaScript

$(window).load(function () {
        "use strict";
        $('.pace').removeClass('pace-inactive');
        setTimeout(function () {
            $('body > main').animate({
                opacity: 1
            }, 400);
           // $('.pace').addClass('pace-inactive');
        }, 2000);
    });