Loader by JaydipPrajapati1910

1.loader {
2  width: 48px;
3  height: 48px;
4  margin: auto;
5  position: relative;
6}
7
8.loader:before {
9  content: '';
10  width: 48px;
11  height: 5px;
12  background: #999;
13  position: absolute;
14  top: 60px;
15  left: 0;
16  border-radius: 50%;
17  animation: shadow324 0.5s linear infinite;
18}
19
20.loader:after {
21  content: '';
22  width: 100%;
23  height: 100%;
24  background: rgb(61, 106, 255);
25  position: absolute;
26  top: 0;
27  left: 0;
28  border-radius: 4px;
29  animation: jump7456 0.5s linear infinite;
30}
31
32@keyframes jump7456 {
33  15% {
34    border-bottom-right-radius: 3px;
35  }
36
37  25% {
38    transform: translateY(9px) rotate(22.5deg);
39  }
40
41  50% {
42    transform: translateY(18px) scale(1, .9) rotate(45deg);
43    border-bottom-right-radius: 40px;
44  }
45
46  75% {
47    transform: translateY(9px) rotate(67.5deg);
48  }
49
50  100% {
51    transform: translateY(0) rotate(90deg);
52  }
53}
54
55@keyframes shadow324 {
56
57  0%,
58    100% {
59    transform: scale(1, 1);
60  }
61
62  50% {
63    transform: scale(1.2, 1);
64  }
65}