1.loader {
2  width: 175px;
3  height: 80px;
4  display: block;
5  margin: auto;
6  background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
7  background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
8  background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
9  background-repeat: no-repeat;
10  position: relative;
11  box-sizing: border-box;
12}
13
14.loader::before {
15  content: '';
16  left: 60px;
17  bottom: 18px;
18  position: absolute;
19  width: 36px;
20  height: 36px;
21  border-radius: 50%;
22  background-color: #FF3D00;
23  background-image: radial-gradient(circle 8px at 18px 18px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 18px 36px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 5px 30px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, #FFF 100%, transparent 0);
24  background-repeat: no-repeat;
25  box-sizing: border-box;
26  animation: rotationBack 3s linear infinite;
27}
28
29.loader::after {
30  content: '';
31  left: 94px;
32  bottom: 15px;
33  position: absolute;
34  width: 24px;
35  height: 24px;
36  border-radius: 50%;
37  background-color: #FF3D00;
38  background-image: radial-gradient(circle 5px at 12px 12px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 12px 24px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 3px 20px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, #FFF 100%, transparent 0);
39  background-repeat: no-repeat;
40  box-sizing: border-box;
41  animation: rotationBack 4s linear infinite reverse;
42}
43
44@keyframes rotationBack {
45  0% {
46    transform: rotate(0deg);
47  }
48
49  100% {
50    transform: rotate(-360deg);
51  }
52}