1.loader {
2  width: 80px;
3  height: 50px;
4  position: relative;
5}
6
7.loader-text {
8  position: absolute;
9  top: 0;
10  padding: 0;
11  margin: 0;
12  color: #C8B6FF;
13  animation: text_713 3.5s ease both infinite;
14  font-size: .8rem;
15  letter-spacing: 1px;
16}
17
18.load {
19  background-color: #9A79FF;
20  border-radius: 50px;
21  display: block;
22  height: 16px;
23  width: 16px;
24  bottom: 0;
25  position: absolute;
26  transform: translateX(64px);
27  animation: loading_713 3.5s ease both infinite;
28}
29
30.load::before {
31  position: absolute;
32  content: "";
33  width: 100%;
34  height: 100%;
35  background-color: #D1C2FF;
36  border-radius: inherit;
37  animation: loading2_713 3.5s ease both infinite;
38}
39
40@keyframes text_713 {
41  0% {
42    letter-spacing: 1px;
43    transform: translateX(0px);
44  }
45
46  40% {
47    letter-spacing: 2px;
48    transform: translateX(26px);
49  }
50
51  80% {
52    letter-spacing: 1px;
53    transform: translateX(32px);
54  }
55
56  90% {
57    letter-spacing: 2px;
58    transform: translateX(0px);
59  }
60
61  100% {
62    letter-spacing: 1px;
63    transform: translateX(0px);
64  }
65}
66
67@keyframes loading_713 {
68  0% {
69    width: 16px;
70    transform: translateX(0px);
71  }
72
73  40% {
74    width: 100%;
75    transform: translateX(0px);
76  }
77
78  80% {
79    width: 16px;
80    transform: translateX(64px);
81  }
82
83  90% {
84    width: 100%;
85    transform: translateX(0px);
86  }
87
88  100% {
89    width: 16px;
90    transform: translateX(0px);
91  }
92}
93
94@keyframes loading2_713 {
95  0% {
96    transform: translateX(0px);
97    width: 16px;
98  }
99
100  40% {
101    transform: translateX(0%);
102    width: 80%;
103  }
104
105  80% {
106    width: 100%;
107    transform: translateX(0px);
108  }
109
110  90% {
111    width: 80%;
112    transform: translateX(15px);
113  }
114
115  100% {
116    transform: translateX(0px);
117    width: 16px;
118  }
119}
120 
121 
122
123