1.container {
2  position: absolute;
3  top: 50%;
4  left: 50%;
5  transform: translate(-50%, -50%);
6  display: flex;
7}
8
9.dash {
10  margin: 0 15px;
11  width: 35px;
12  height: 15px;
13  border-radius: 8px;
14  background: rgb(82, 159, 246);
15  box-shadow: rgb(82, 159, 246) 0 0 15px 0;
16}
17
18.first {
19  margin-right: -18px;
20  transform-origin: center left;
21  animation: spin 3s linear infinite;
22}
23
24.seconde {
25  transform-origin: center right;
26  animation: spin2 3s linear infinite;
27  animation-delay: .2s;
28}
29
30.third {
31  transform-origin: center right;
32  animation: spin3 3s linear infinite;
33  animation-delay: .3s;
34}
35
36.fourth {
37  transform-origin: center right;
38  animation: spin4 3s linear infinite;
39  animation-delay: .4s;
40}
41
42@keyframes spin {
43  0% {
44    transform: rotate(0deg);
45  }
46
47  25% {
48    transform: rotate(360deg);
49  }
50
51  30% {
52    transform: rotate(370deg);
53  }
54
55  35% {
56    transform: rotate(360deg);
57  }
58
59  100% {
60    transform: rotate(360deg);
61  }
62}
63
64@keyframes spin2 {
65  0% {
66    transform: rotate(0deg);
67  }
68
69  20% {
70    transform: rotate(0deg);
71  }
72
73  30% {
74    transform: rotate(-180deg);
75  }
76
77  35% {
78    transform: rotate(-190deg);
79  }
80
81  40% {
82    transform: rotate(-180deg);
83  }
84
85  78% {
86    transform: rotate(-180deg);
87  }
88
89  95% {
90    transform: rotate(-360deg);
91  }
92
93  98% {
94    transform: rotate(-370deg);
95  }
96
97  100% {
98    transform: rotate(-360deg);
99  }
100}
101
102@keyframes spin3 {
103  0% {
104    transform: rotate(0deg);
105  }
106
107  27% {
108    transform: rotate(0deg);
109  }
110
111  40% {
112    transform: rotate(180deg);
113  }
114
115  45% {
116    transform: rotate(190deg);
117  }
118
119  50% {
120    transform: rotate(180deg);
121  }
122
123  62% {
124    transform: rotate(180deg);
125  }
126
127  75% {
128    transform: rotate(360deg);
129  }
130
131  80% {
132    transform: rotate(370deg);
133  }
134
135  85% {
136    transform: rotate(360deg);
137  }
138
139  100% {
140    transform: rotate(360deg);
141  }
142}
143
144@keyframes spin4 {
145  0% {
146    transform: rotate(0deg);
147  }
148
149  38% {
150    transform: rotate(0deg);
151  }
152
153  60% {
154    transform: rotate(-360deg);
155  }
156
157  65% {
158    transform: rotate(-370deg);
159  }
160
161  75% {
162    transform: rotate(-360deg);
163  }
164
165  100% {
166    transform: rotate(-360deg);
167  }
168}