# stair
<div class="loading">Loading</div>
1
@import url(https://fonts.googleapis.com/css?family=Lato);
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
text-align: center;
background: #2980b9;
}
.loading {
display: flex;
color: white;
font-size: 3em;
font-family: Lato, sans-serif;
text-transform: uppercase;
span {
padding: 0 20px;
line-height: 100px;
background: #34495e;
animation: bulge 2s infinite;
}
}
@keyframes bulge {
50% {
box-shadow: 0 20px 0 #eee;
transform: translateY(-35px);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
let loading = document.querySelector(".loading");
let letters = loading.textContent.split("");
loading.textContent = "";
letters.forEach((letter, i) => {
let span = document.createElement("span");
span.textContent = letter;
span.style.animationDelay = `${i / 5}s`;
loading.append(span);
});
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10