1.loader {
2  width: 48px;
3  height: 48px;
4  display: flex;
5  transform-origin: 50% 125%;
6  animation: mov-y 1s infinite linear;
7}
8
9.loader:before,
10      .loader:after {
11  content: "";
12  flex: 1;
13  background: #fff;
14  transform-origin: 0% 100%;
15  animation: rtr-x 1s infinite linear;
16}
17
18.loader:before {
19  transform-origin: 100% 100%;
20  animation-name: rtr-rx;
21}
22
23@keyframes mov-y {
24  0%,25% {
25    transform: translateY(0)     scaleY(1)
26  }
27
28  49% {
29    transform: translateY(-75%)  scaleY(1)
30  }
31
32  50% {
33    transform: translateY(-75%)  scaleY(-1)
34  }
35
36  75%,100% {
37    transform: translateY(-150%) scaleY(-1)
38  }
39}
40
41@keyframes rtr-x {
42  25%,75% {
43    transform: rotate(0deg)
44  }
45
46  50% {
47    transform: rotate(90deg)
48  }
49}
50
51@keyframes rtr-rx {
52  25%,75% {
53    transform: rotate(0deg)
54  }
55
56  50% {
57    transform: rotate(-90deg)
58  }
59}
60