CSS
html, body {
height: 100%;
}
body {
background-color: #f5f7f9;
color: #6c6c6c;
font: 300 1em/1.5em "Helvetica Neue", sans-serif;
margin: 0;
position: relative;
}
h1 {
font-size: 2.25em;
font-weight: 100;
line-height: 1.2em;
margin: 0 0 1.5em;
}
/* HELPERS */
.text-center {
text-align: center;
}
/* GRID */
.container {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
/* PROGRESS */
.progress {
background-color: #e5e9eb;
height: 0.25em;
position: relative;
width: 24em;
}
.progress-bar {
animation-duration: 3s;
animation-name: width;
background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
animation-iteration-count:infinite;
background-size: 24em 0.25em;
height: 100%;
position: relative;
}
.progress-shadow {
background-image: linear-gradient(to bottom, #eaecee, transparent);
height: 4em;
position: absolute;
top: 100%;
transform: skew(45deg);
transform-origin: 0 0;
width: 100%;
}
/* ANIMATIONS */
@keyframes width {
0%, 100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}
0% {
width: 0;
}
100% {
width: 100%;
}
}
