CSS
html, body {
background: #111;
height: 100vh;
width: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.logo {
font-size: 150px;
margin-bottom: 50px;
color: #fff;
}
.progress {
width: 300px;
max-width: 85vw;
height: 6px;
bottom: 20vh;
border-radius: 4px;
background: rgba(255,255,255,0.5);
overflow: hidden;
}
.progress:after {
content: '';
display: block;
width: 100%;
height: 6px;
background: #fff;
animation: load 15s linear;
}
@keyframes load {
0% { width: 0; }
10% { width: 5%; }
20% { width: 15%; }
30% { width: 25%; }
40% { width: 30%; }
50% { width: 44%; }
60% { width: 50%; }
70% { width: 72%; }
80% { width: 84%; }
90% { width: 92%; }
100% { width: 100%; }
}
