Loader by adamgiebl

1.loader {
2  width: 64px;
3  height: 64px;
4  background: #ff6b6b;
5  display: block;
6  margin: 20px auto;
7  position: relative;
8  box-sizing: border-box;
9  animation: rotation 1s linear infinite;
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: 64px;
20  height: 64px;
21  background: #ff3d3d;
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: 48px;
29  height: 48px;
30  border-radius: 50%;
31  position: absolute;
32  left: 50%;
33  top: 50%;
34  background: rgb(255, 107, 107);
35  transform: translate(-50%, -50%);
36  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
37}
38
39@keyframes rotation {
40  0% {
41    transform: rotate(0deg);
42  }
43
44  100% {
45    transform: rotate(360deg);
46  }
47}