#wrapper
#loader
#loadText Loading...
View Compiled
$loader_color: #DAA520;
body {
background: #202020 radial-gradient(transparent,#303030);
overflow:hidden;
}
#wrapper{
width: 150px;
margin: 150px auto;
position:relative;
#loader {
position:relative;
width: 100%;
height: 10px;
border: 1px solid $loader_color;
border-radius: 10px;
animation: turn 4s linear 1.75s infinite;
&:before {
content:'';
display:block;
position:absolute;
width: 0%;
height: 100%;
background: $loader_color;
box-shadow: 10px 0px 15px 0px $loader_color;
animation: load 2s linear infinite;
}
}
#loadText{
width:100%;
position:absolute;
top: 10px;
color: $loader_color;
font-size: 1.4em;
text-align:center;
animation: bounce 2s linear infinite;
}
}
@keyframes load {
0%{width: 0%;}
87.5%, 100%{width:100%;}
}
@keyframes turn{
0%{transform: rotateY(0deg);}
6.25%, 50%{transform: rotateY(180deg);}
56.25%, 100%{transform: rotateY(360deg);}
}
@keyframes bounce{
0%,100%{top: 10px;}
12.5%{top: 30px;}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.