Loader animation
From Bulgaria Summit website
http://bulgariawebsummit.com/
HTML
<div class="loader">
<div class="strip-holder">
<div class="strip-1"></div>
<div class="strip-2"></div>
<div class="strip-3"></div>
</div>
</div>
<div class="loader-2">
<div class="strip-holder-2">
<div class="strip-4"></div>
<div class="strip-5"></div>
<div class="strip-6"></div>
</div>
</div>
CSS
/*!
// 3. Loader
// --------------------------------------------------*/
.loader {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 99;
background: #333333;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
opacity: 1;
}
.strip-holder {
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 50%;
margin-left: -30px;
position: relative;
}
.strip-1,
.strip-2,
.strip-3 {
width: 20px;
height: 20px;
background: #3ebbed;
position: relative;
-webkit-animation: stripMove 2s ease infinite alternate;
animation: stripMove 2s ease infinite alternate;
-moz-animation: stripMove 2s ease infinite alternate;
}
.strip-2 {
-webkit-animation-duration: 2.1s;
animation-duration: 2.1s;
background-color: #ffffff;
}
.strip-3 {
-webkit-animation-duration: 2.2s;
animation-duration: 2.2s;
background-color: #1c3e8f;
}
@-webkit-keyframes stripMove {
0% {
transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
}
50% {
transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
transform: scale(4, 1);
-webkit-transform: scale(4, 1);
-moz-transform: scale(4, 1);
}
100% {
transform: translate3d(-50px, 0px, 0px);
-webkit-transform: translate3d(-50px, 0px, 0px);
-moz-transform: translate3d(-50px, 0px, 0px);
}
}
@-moz-keyframes stripMove {
0% {
transform: translate3d(-50px, 0px, 0px);
-webkit-transform: translate3d(-50px, 0px, 0px);
-moz-transform: translate3d(-50px, 0px, 0px);
}
50% {
transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px,...