1.loader {
2  position: absolute;
3  top: 50%;
4  left: 50%;
5  transform: translate(-50%, -50%);
6  width: 100px;
7  height: 100px;
8  border-radius: 50%;
9  overflow: hidden;
10  animation: mac0123 1s linear infinite;
11}
12
13.loader span {
14  position: absolute;
15  width: 100%;
16  height: 100%;
17  background: #f00;
18  left: 50%;
19  border-radius: 50%;
20  transform-origin: left;
21}
22
23.loader span:nth-child(1) {
24  background: #0fa503;
25  transform: rotate(0deg);
26  z-index: 2;
27}
28
29.loader span:nth-child(2) {
30  background: #ffd203;
31  transform: rotate(60deg);
32  z-index: 3;
33}
34
35.loader span:nth-child(3) {
36  background: #54cd28;
37  transform: rotate(120deg);
38  z-index: 4;
39}
40
41.loader span:nth-child(4) {
42  background: #129cf5;
43  transform: rotate(180deg);
44  z-index: 5;
45}
46
47.loader span:nth-child(5) {
48  background: #bb5ed3;
49  transform: rotate(240deg);
50  z-index: 6;
51}
52
53.loader span:nth-child(6) {
54  background: #ff4f45;
55  transform: rotate(300deg);
56  z-index: 7;
57  overflow: hidden;
58}
59
60.loader span:nth-child(6):before {
61  content: '';
62  position: absolute;
63  top: 45px;
64  left: -72px;
65  width: 100%;
66  height: 100%;
67  background: #ffd203;
68  border-radius: 50%;
69  z-index: 2;
70}
71
72.loader span:nth-child(6):after {
73  content: '';
74  position: absolute;
75  top: 42px;
76  left: -23px;
77  width: 100%;
78  height: 100%;
79  background: #fea503;
80  border-radius: 50%;
81}
82
83@keyframes mac0123 {
84  0% {
85    transform: translate(-50%, -50%) rotate(359deg);
86  }
87
88  100% {
89    transform: translate(-50%, -50%) rotate(0deg);
90  }
91}