Loader by asgardOP

1.loader {
2  width: 100px;
3  height: 3px;
4  background-color: rgb(15, 15, 15);
5  border-radius: 20px;
6  overflow: hidden;
7}
8
9.child {
10  width: 60px;
11  height: 3px;
12  background-color: rgb(107, 27, 255);
13  border-radius: 20px;
14  z-index: 0;
15  margin-left: -60px;
16  animation: go 1s 0s infinite;
17}
18
19@keyframes go {
20  from {
21    margin-left: -100px;
22    width: 80px;
23  }
24  to {
25    width: 30px;
26    margin-left: 110px;
27  }
28}
29
30ul {
31  list-style: none;
32}
33
34.text {
35  width: 100px;
36  height: 30px;
37  background-color: transparent;
38  margin-top: 20px;
39  text-align: center;
40}
41
42.text::before {
43  content: "Loading";
44  color: white;
45  animation: text 1s 0s infinite;
46}
47
48@keyframes text {
49  0% {
50    content: "Loading";
51  }
52
53  30% {
54    content: "Loading.";
55  }
56
57  60% {
58    content: "Loading..";
59  }
60
61  100% {
62    content: "Loading...";
63  }
64}
65