1.loader {
2  width: 48px;
3  height: 48px;
4  background: #353535;
5  display: block;
6  margin: 20px auto;
7  position: relative;
8  box-sizing: border-box;
9  animation: rotationBack 1s ease-in-out infinite reverse;
10}
11
12.loader::before {
13  content: '';
14  box-sizing: border-box;
15  left: 0;
16  top: 0;
17  transform: rotate(45deg);
18  position: absolute;
19  width: 48px;
20  height: 48px;
21  background: #2e2e2e;
22  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
23}
24
25.loader::after {
26  content: '';
27  box-sizing: border-box;
28  width: 32px;
29  height: 32px;
30  border-radius: 50%;
31  position: absolute;
32  left: 50%;
33  top: 50%;
34  background: rgb(0, 0, 0);
35  transform: translate(-50%, -50%);
36  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
37}
38
39@keyframes rotationBack {
40  0% {
41    transform: rotate(0deg);
42  }
43
44  100% {
45    transform: rotate(-360deg);
46  }
47}