Loader by Nawsome

1.blobs {
2  width: 300px;
3  height: 300px;
4  position: absolute;
5  overflow: hidden;
6  border-radius: 70px;
7  transform-style: preserve-3d;
8}
9
10.blobs .blob-center {
11  transform-style: preserve-3d;
12  position: absolute;
13  background: #1d1d1d;
14  top: 50%;
15  left: 50%;
16  width: 30px;
17  height: 30px;
18  transform-origin: left top;
19  transform: scale(0.9) translate(-50%, -50%);
20  animation: blob-grow_2 linear 3.4s infinite;
21  border-radius: 50%;
22  box-shadow: 0 -10px 40px -5px #1d1d1d;
23}
24
25.blob {
26  position: absolute;
27  background: #1d1d1d;
28  top: 50%;
29  left: 50%;
30  width: 30px;
31  height: 30px;
32  border-radius: 50%;
33  animation: blobs_2 ease-out 3.4s infinite;
34  transform: scale(0.9) translate(-50%, -50%);
35  transform-origin: center top;
36  opacity: 0;
37}
38
39.blob:nth-child(1) {
40  -webkit-animation-delay: 0.2s;
41  animation-delay: 0.2s;
42}
43
44.blob:nth-child(2) {
45  -webkit-animation-delay: 0.4s;
46  animation-delay: 0.4s;
47}
48
49.blob:nth-child(3) {
50  -webkit-animation-delay: 0.6s;
51  animation-delay: 0.6s;
52}
53
54.blob:nth-child(4) {
55  -webkit-animation-delay: 0.8s;
56  animation-delay: 0.8s;
57}
58
59.blob:nth-child(5) {
60  -webkit-animation-delay: 1s;
61  animation-delay: 1s;
62}
63
64@keyframes blobs_2 {
65  0% {
66    opacity: 0;
67    transform: scale(0) translate(calc(-330px - 50%), -50%);
68  }
69
70  1% {
71    opacity: 1;
72  }
73
74  35%, 65% {
75    opacity: 1;
76    transform: scale(0.9) translate(-50%, -50%);
77  }
78
79  99% {
80    opacity: 1;
81  }
82
83  100% {
84    opacity: 0;
85    transform: scale(0) translate(calc(330px - 50%), -50%);
86  }
87}
88
89@keyframes blob-grow_2 {
90  0%, 39% {
91    transform: scale(0) translate(-50%, -50%);
92  }
93
94  40%, 42% {
95    transform: scale(1, 0.9) translate(-50%, -50%);
96  }
97
98  43%, 44% {
99    transform: scale(1.2, 1.1) translate(-50%, -50%);
100  }
101
102  45%, 46% {
103    transform: scale(1.3, 1.2) translate(-50%, -50%);
104  }
105
106  47%, 48% {
107    transform: scale(1.4, 1.3) translate(-50%, -50%);
108  }
109
110  52% {
111    transform: scale(1.5, 1.4) translate(-50%, -50%);
112  }
113
114  54% {
115    transform: scale(1.7, 1.6) translate(-50%, -50%);
116  }
117
118  58% {
119    transform: scale(1.8, 1.7) translate(-50%, -50%);
120  }
121
122  68%, 70% {
123    transform: scale(1.7, 1.5) translate(-50%, -50%);
124  }
125
126  78% {
127    transform: scale(1.6, 1.4) translate(-50%, -50%);
128  }
129
130  80%, 81% {
131    transform: scale(1.5, 1.4) translate(-50%, -50%);
132  }
133
134  82%, 83% {
135    transform: scale(1.4, 1.3) translate(-50%, -50%);
136  }
137
138  84%, 85% {
139    transform: scale(1.3, 1.2) translate(-50%, -50%);
140  }
141
142  86%, 87% {
143    transform: scale(1.2, 1.1) translate(-50%, -50%);
144  }
145
146  90%, 91% {
147    transform: scale(1, 0.9) translate(-50%, -50%);
148  }
149
150  92%, 100% {
151    transform: scale(0) translate(-50%, -50%);
152  }
153}