1.loader {
2  position: relative;
3  display: flex;
4  align-items: center;
5  justify-content: center;
6  height: 300px;
7  width: 300px;
8  border-radius: 50%;
9  box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 1),
10    inset 10px 10px 10px rgba(0, 0, 0, 0.1);
11}
12
13.loader::before {
14  content: "";
15  position: absolute;
16  height: 200px;
17  width: 200px;
18  border-radius: 50%;
19  box-shadow: -10px -10px 15px rgba(255, 255, 255, 1),
20    10px 10px 10px rgba(0, 0, 0, 0.1);
21}
22
23.blue {
24  height: 186px;
25  width: 220px;
26  position: absolute;
27  animation: rotate 5s linear infinite;
28}
29
30@keyframes rotate {
31  100% {
32    transform: rotate(360deg);
33  }
34}
35
36.blue::before {
37  content: "";
38  position: absolute;
39  height: 30px;
40  border-radius: 50%;
41  width: 30px;
42  background: linear-gradient(45deg, #336dff, #5c89ff);
43  box-shadow: 0 5px 10px rgb(0 0 0 / 30%);
44}