Loader by Uncannypotato69

1.wrapper {
2  min-height: 3rem;
3  min-width: 14rem;
4  font-size: 2rem;
5  position: relative;
6  overflow: hidden;
7  mask-image: linear-gradient(
8    to right,
9    rgba(0, 0, 0, 0),
10    rgba(0, 0, 0, 1) 30%,
11    rgba(0, 0, 0, 1) 70%,
12    rgba(0, 0, 0, 0)
13  );
14  font-family: monospace;
15}
16
17.letter {
18  width: 1ch;
19  position: absolute;
20  top: 50%;
21  transform: translate(0px, -50%);
22  left: 100%;
23  animation: scroll 2.5s linear infinite;
24}
25
26@keyframes scroll {
27  to {
28    left: -1ch;
29  }
30}
31
32.letter1 {
33  animation-delay: calc(2.5s / 10 * (10 - 1) * -1);
34}
35.letter2 {
36  animation-delay: calc(2.5s / 10 * (10 - 2) * -1);
37}
38.letter3 {
39  animation-delay: calc(2.5s / 10 * (10 - 3) * -1);
40}
41.letter4 {
42  animation-delay: calc(2.5s / 10 * (10 - 4) * -1);
43}
44.letter5 {
45  animation-delay: calc(2.5s / 10 * (10 - 5) * -1);
46}
47.letter6 {
48  animation-delay: calc(2.5s / 10 * (10 - 6) * -1);
49}
50.letter7 {
51  animation-delay: calc(2.5s / 10 * (10 - 7) * -1);
52}
53.letter8 {
54  animation-delay: calc(2.5s / 10 * (10 - 8) * -1);
55}
56.letter9 {
57  animation-delay: calc(2.5s / 10 * (10 - 9) * -1);
58}
59.letter10 {
60  animation-delay: calc(2.5s / 10 * (10 - 10) * -1);
61}
62