1.loader {
2 display: flex;
3 align-items: center;
4 justify-content: center;
5 position: relative;
6}
7
8.out-1 {
9 position: absolute;
10 width: 4em;
11 height: 4em;
12 border-radius: 100%;
13 border: 0.2em solid transparent;
14 border-top-color: rgb(43, 226, 83);
15 animation: rec 2s infinite;
16 transition: all ease-in-out 0.3s;
17}
18
19.out-2 {
20 position: absolute;
21 width: 4em;
22 height: 4em;
23 border-radius: 100%;
24 border: 0.2em solid transparent;
25 border-left-color: rgb(226, 223, 43);
26 animation: rec 2s infinite;
27 transition: all ease-in-out 0.3s;
28}
29
30.out-3 {
31 position: absolute;
32 width: 4em;
33 height: 4em;
34 border-radius: 100%;
35 border: 0.2em solid transparent;
36 border-bottom-color: rgb(51, 105, 252);
37 animation: rec 2s infinite;
38 transition: all ease-in-out 0.3s;
39}
40
41.in {
42 position: absolute;
43 border-radius: 100%;
44 border: 0.2em solid rgba(43, 226, 83, 0.11);
45 width: 4em;
46 height: 4em;
47 transition: all ease-in-out 0.3s;
48}
49
50@keyframes rec {
51 0% {
52  transform: rotate(360deg);
53 }
54}