1.loader {
2  width: 100px;
3  height: 100px;
4  box-sizing: border-box;
5  border-radius: 50%;
6  border-top: 5px solid #e74c3c;
7  position: relative;
8  animation: load 2s linear infinite;
9}
10
11.loader::before,.loader::after {
12  content: '';
13  width: 100px;
14  height: 100px;
15  position: absolute;
16  left: 0;
17  top: 0;
18  box-sizing: border-box;
19  border-radius: 50%;
20}
21
22.loader::before {
23  border-top: 5px solid #e67e22;
24  transform: rotate(120deg);
25}
26
27.loader::after {
28  border-top: 5px solid #3498db;
29  transform: rotate(240deg);
30}
31
32.loader span {
33  position: absolute;
34  font-size: small;
35  width: 100px;
36  height: 100px;
37  color: #fff;
38  text-align: center;
39  line-height: 100px;
40  animation: a2 2s linear infinite;
41}
42
43@keyframes load {
44  to {
45    transform: rotate(360deg);
46  }
47}
48
49@keyframes a2 {
50  to {
51    transform: rotate(-360deg);
52  }
53}