Card by codebykay101

1.container {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  gap: 20px;
6}
7
8.loader {
9  position: relative;
10  width: 150px;
11  height: 150px;
12  background: rgba(45, 45, 45, 1);
13  overflow: hidden;
14  transform: rotate(calc(90deg * var(--i)));
15}
16
17.loader::before {
18  content: "";
19  position: absolute;
20  width: 300px;
21  height: 300px;
22  background: radial-gradient(var(--clr), transparent);
23  animation: animate 1.5s linear infinite;
24}
25
26.loader::after {
27  content: "";
28  position: absolute;
29  inset: 2px;
30  background: rgba(45, 45, 45, 0.9);
31}
32
33@keyframes animate {
34  0% {
35    transform: translate(-150px, -150px);
36  }
37  25% {
38    transform: translate(0px, -150px);
39  }
40  50% {
41    transform: translate(0px, 0px);
42  }
43  75% {
44    transform: translate(-150px, 0px);
45  }
46  100% {
47    transform: translate(-150px, -150px);
48  }
49}
50