1.loader {
2  width: 48px;
3  height: 48px;
4  display: block;
5  margin: 20px auto;
6  box-sizing: border-box;
7  position: relative;
8}
9
10.loader::after {
11  content: '';
12  width: 48px;
13  height: 48px;
14  left: 0;
15  bottom: 0;
16  position: absolute;
17  border-radius: 50% 50% 0;
18  border: 15px solid red;
19  transform: rotate(45deg) translate(0, 0);
20  box-sizing: border-box;
21  animation: animMarker 0.4s ease-in-out infinite alternate;
22}
23
24.loader::before {
25  content: '';
26  box-sizing: border-box;
27  position: absolute;
28  left: 0;
29  right: 0;
30  margin: auto;
31  top: 150%;
32  width: 24px;
33  height: 4px;
34  border-radius: 50%;
35  background: rgba(0, 0, 0, 0.2);
36  animation: animShadow 0.4s ease-in-out infinite alternate;
37}
38
39@keyframes animMarker {
40  0% {
41    transform: rotate(45deg) translate(5px, 5px);
42  }
43
44  100% {
45    transform: rotate(45deg) translate(-5px, -5px);
46  }
47}
48
49@keyframes animShadow {
50  0% {
51    transform: scale(0.5);
52  }
53
54  100% {
55    transform: scale(1);
56  }
57}
58