Loader by S4tyendra

1.container {
2  position: absolute;
3  top: 50%;
4  left: 50%;
5  transform: translate(-50%, -50%);
6}
7
8.container .preloader {
9  animation: rotate 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
10}
11
12@keyframes rotate {
13  50% {
14    transform: rotate(360deg);
15  }
16
17  100% {
18    transform: rotate(720deg);
19  }
20}
21
22.preloader span {
23  --c: #3f9bf2;
24  position: absolute;
25  display: block;
26  height: 64px;
27  width: 64px;
28  background: var(--c);
29  border: 1px solid var(--c);
30  border-radius: 100%;
31}
32
33.preloader span:nth-child(1) {
34  transform: translate(-28px, -28px);
35  animation: shape_1 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
36}
37
38@keyframes shape_1 {
39  60% {
40    transform: scale(0.4);
41  }
42}
43
44.preloader span:nth-child(2) {
45  transform: translate(28px, -28px);
46  animation: shape_2 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
47}
48
49@keyframes shape_2 {
50  40% {
51    transform: scale(0.4);
52  }
53}
54
55.preloader span:nth-child(3) {
56  position: relative;
57  border-radius: 0px;
58  transform: scale(0.98) rotate(-45deg);
59  animation: shape_3 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
60}
61
62@keyframes shape_3 {
63  50% {
64    border-radius: 100%;
65    transform: scale(0.5) rotate(-45deg);
66  }
67
68  100% {
69    transform: scale(0.98) rotate(-45deg);
70  }
71}
72
73.shadow {
74  position: relative;
75  top: 30px;
76  left: 50%;
77  transform: translateX(-50%);
78  display: block;
79  height: 16px;
80  width: 64px;
81  border-radius: 50%;
82  background-color: #d9d9d9;
83  border: 1px solid #d9d9d9;
84  animation: shadow 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
85}
86
87@keyframes shadow {
88  50% {
89    transform: translateX(-50%) scale(0.5);
90    border-color: #f2f2f2;
91  }
92}
93