Loader by AmIt-DasIT

1.card {
2  width: 80px;
3  height: 80px;
4  border-radius: 50%;
5  display: flex;
6  justify-content: center;
7  align-items: center;
8  overflow: hidden;
9  position: relative;
10  transition: 1s;
11  animation: rotate 1s linear infinite;
12}
13
14.card .conic_back1 {
15  width: 150px;
16  height: 150px;
17  position: absolute;
18  background: conic-gradient(transparent, transparent, transparent, crimson);
19}
20
21.card .conic_back2 {
22  width: 150px;
23  height: 150px;
24  position: absolute;
25  transform: rotate(180deg);
26  background: conic-gradient(transparent, transparent, transparent, orange);
27}
28
29@keyframes rotate {
30  0% {
31    width: 0px;
32    height: 0px;
33    transform: rotate(0deg);
34  }
35
36  30% {
37    width: 45px;
38    height: 45px;
39    transform: rotate(100deg);
40  }
41
42  60% {
43    width: 35px;
44    height: 35px;
45    filter: blur(1px);
46    transform: rotate(360deg);
47  }
48
49  100% {
50    transform: rotate(1240deg);
51  }
52}
53