Loader by Praashoo7

1.main {
2  display: flex;
3  flex-wrap: wrap;
4  width: 15em;
5  align-items: center;
6  justify-content: center;
7}
8
9.card {
10  width: 40px;
11  height: 40px;
12  border-top-left-radius: 10px;
13  background: lightgrey;
14  transition: .4s ease-in-out, .2s background-color;
15  background: rgba(255, 255, 255, 0.2);
16  backdrop-filter: blur(5px);
17  margin: .2em;
18  border-radius: 5px;
19  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
20  border: 1px solid rgba(255, 255, 255, 0.3);
21  animation: 2s loading90 infinite;
22}
23
24.card:nth-child(2) {
25  animation-delay: 1s;
26}
27
28.card:nth-child(4) {
29  animation-delay: 1s;
30}
31
32.card:nth-child(6) {
33  animation-delay: 1s;
34}
35
36.card:nth-child(8) {
37  animation-delay: 1s;
38}
39
40.card:nth-child(10) {
41  animation-delay: 1s;
42}
43
44.card:nth-child(12) {
45  animation-delay: 1s;
46}
47
48.card:nth-child(14) {
49  animation-delay: 1s;
50}
51
52@keyframes loading90 {
53  0% {
54    background: rgba(255, 255, 255, 0.2);
55  }
56
57  50% {
58    background: limegreen;
59  }
60
61  100% {
62    background: rgba(255, 255, 255, 0.2);
63  }
64}