<div class="card">
<h1>Simple Loader</h1>
<p>A simple warframe style loader</p>
<div class="loader">
<div class="spin"></div>
<div class="bounce"></div>
</div>
</div>
$master: 16px; /* Everything scales off of this! */
$background: #e3e3e3;
$cardbackground: #fbfbfb;
$cardhoverbackground: #fff;
$color: #111;
$margin: ($master / 2) 0 ($master + ($master / 2)) 0;
$shadow: 0 2px 3px rgba(0,0,0,0.1);
$hovershadow: 0 4px 6px rgba(0,0,0,0.2);
html, body {
background: $background;
height: 100%;
margin: 0;
overflow-x: hidden;
width: 100%;
}
body {
font-family: 'Raleway', sans-serif;
letter-spacing: 1px;
}
*,
*:after,
*:before {
box-sizing: border-box;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.card {
background: $cardbackground;
border-radius: 0.15em;
box-shadow: $shadow;
float: left;
font-size: $master;
left: 50%;
margin: 0 auto;
padding: ($master + ($master / 2)) ($master * 2);
position: relative;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
width: ($master * 20);
&:hover {
background: $cardhoverbackground;
box-shadow: $hovershadow;
}
h1 {
color: $color;
font-size: ($master + ($master / 2));
font-weight: 400;
margin: $margin;
text-align: center;
}
p {
color: lighten($color, 12%);
font-weight: 300;
line-height: ($master + ($master / 2));
margin: $margin;
text-align: center;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(0deg);
}
20% {
transform: rotate(90deg);
}
35% {
transform: rotate(90deg);
}
45% {
transform: rotate(180deg);
}
60% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
85% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
10% {
-webkit-transform: rotate(0deg);
}
20% {
-webkit-transform: rotate(90deg);
}
35% {
-webkit-transform: rotate(90deg);
}
45% {
-webkit-transform: rotate(180deg);
}
60% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
}
85% {
-webkit-transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes bounce {
0% {
transform: scaleX(1);
}
10% {
transform: scaleX(1);
}
20% {
transform: scaleX(0.8);
}
35% {
transform: scaleX(0.8);
}
45% {
transform: scaleX(1);
}
60% {
transform: scaleX(1);
}
75% {
transform: scaleX(0.8);
}
85% {
transform: scaleX(0.8);
}
100% {
transform: scaleX(1);
}
}
@-webkit-keyframes bounce {
0% {
-webkit-transform: scaleX(1);
}
10% {
-webkit-transform: scaleX(1);
}
20% {
-webkit-transform: scaleX(0.8);
}
35% {
-webkit-transform: scaleX(0.8);
}
45% {
-webkit-transform: scaleX(1);
}
60% {
-webkit-transform: scaleX(1);
}
75% {
-webkit-transform: scaleX(0.8);
}
85% {
-webkit-transform: scaleX(0.8);
}
100% {
-webkit-transform: scaleX(1);
}
}
.loader {
box-sizing: content-box;
height: 40px;
margin: 0 auto 10px auto;
position: relative;
width: 70px;
&:before {
border: 2px solid $color;
box-sizing: content-box;
content: '';
height: 0;
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width: 0;
}
.spin {
-webkit-animation: spin 2.25s linear infinite;
animation: spin 2.25s linear infinite;
height: 14px;
left: 28px;
position: absolute;
top: 13px;
width: 14px;
&:before {
border: 3px solid $color;
box-sizing: content-box;
content: '';
height: 14px;
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
width: 14px;
}
}
.bounce {
-webkit-animation: bounce 2.25s linear infinite;
animation: bounce 2.25s linear infinite;
height: 100%;
margin: 0 auto;
position: relative;
width: 100%;
&:after,
&:before {
box-sizing: content-box;
content: '';
height: 10px;
position: absolute;
top: 13px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 10px;
}
&:before {
border-bottom: 3px solid $color;
border-left: 3px solid $color;
left: 0;
}
&:after {
border-right: 3px solid $color;
border-top: 3px solid $color;
right: 0;
}
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.