CSS
html, body {
height: 100%;
margin: 0;
}
body {
font-family: 'Lato', sans-serif;
background: #000000;
background: -webkit-linear-gradient(right, #000000 , #434343);
background: linear-gradient(to left, #000000 , #434343);
}
.loader {
height: 30px;
width: 500px;
border: 2px solid #222;
position: relative;
font-weight: 300;
font-size: 18px;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}
.loader:after {
content: "";
display: block;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(top,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0) 100%);
position: absolute;
top: 0;
left: 0;
}
.track {
width: 100%;
height: 100%;
text-align: center;
line-height: 30px;
overflow: hidden;
position: relative;
opacity: 0.99;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
}
.glow {
width: 0%;
height: 100%;
background: -webkit-linear-gradient(top,
rgba(210,255,82,1) 0%,
rgba(145,232,66,1) 100%);
background: linear-gradient(to bottom,
rgba(210,255,82,1) 0%,
rgba(145,232,66,1) 100%);
box-shadow: 0px 0px 14px 1px rgba(145,232,66,1);
position: absolute;
top: 0;
left: 0;
-webkit-animation: flicker 5s infinite;
animation: flicker 5s infinite;
overflow: hidden;
}
.underglow {
width: 0%;
height: 0%;
box-shadow: 0px 0px 60px 10px rgba(145,232,66,1);
position: absolute;
bottom: -5px;
-webkit-animation: flicker 5s infinite;
animation: flicker 5s infinite;
}
.front {
color: #000;
font-weight: 400;
display: inline;
opacity: 0;
animation: showtext 1s linear 3.7s;
animation-fill-mode: forwards;
}
.back {
color: #fff;
}
.front, .back {
letter-spacing: 10px;
}
@-webkit-keyframes flicker {
10% { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; }
30% { opacity: 0.86; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=86)"; }
60% { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
80% { opacity: 0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; }
100% { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
}
@keyframes flicker {
10% { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; }
30% { opacity: 0.86; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=86)"; }
60% { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
80% { opacity: 0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; }
100% { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
}
@keyframes showtext {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
