Loader by omar-alghaish

1.loader-1 {
2  width: 100px;
3  height: 100px;
4  border-radius: 50%;
5  border: 5px solid rgb(218, 203, 4);
6  border-left-color: transparent;
7  animation: animate_681 3s linear infinite;
8  position: relative;
9}
10
11.loader-2 {
12  width: 80px;
13  height: 80px;
14  border-radius: 50%;
15  border: 5px solid rgb(0, 119, 255);
16  border-top-color: transparent;
17  animation: animate_6810 .9s linear infinite;
18  position: absolute;
19  margin: 5px;
20}
21
22.loader-3 {
23  width: 60px;
24  height: 60px;
25  border-radius: 50%;
26  border: 5px solid rgb(30, 255, 0);
27  border-right-color: transparent;
28  animation: animate_681 2s linear  infinite;
29  position: absolute;
30  margin: 15px;
31}
32
33.loader-4 {
34  width: 40px;
35  height: 40px;
36  border-radius: 50%;
37  border: 5px solid rgb(194, 3, 92);
38  border-bottom-color: transparent;
39  animation: animate_6810 .7s linear  infinite;
40  position: absolute;
41  margin: 25px;
42}
43
44@keyframes animate_6810 {
45  0% {
46    transform: rotate(360deg);
47  }
48}
49
50@keyframes animate_681 {
51  0% {
52    transform: rotate(-360deg);
53  }
54}