1.custom-loader {
2  width: 70px;
3  height: 70px;
4  background: #ffa600;
5  border-radius: 50px;
6  -webkit-mask: radial-gradient(circle 31px at 50% calc(100% + 13px),#000 95%,#0000) top 4px left 50%,
7    radial-gradient(circle 31px,#000 95%,#0000) center,
8    radial-gradient(circle 31px at 50% -13px,#000 95%,#0000) bottom 4px left 50%,
9    linear-gradient(#000 0 0);
10  -webkit-mask-composite: xor;
11  mask-composite: exclude;
12  -webkit-mask-repeat: no-repeat;
13  animation: cu10 1.5s infinite;
14}
15
16@keyframes cu10 {
17  0% {
18    -webkit-mask-size: 0    18px,0    18px,0    18px,auto
19  }
20
21  16.67% {
22    -webkit-mask-size: 100% 18px,0    18px,0    18px,auto
23  }
24
25  33.33% {
26    -webkit-mask-size: 100% 18px,100% 18px,0    18px,auto
27  }
28
29  50% {
30    -webkit-mask-size: 100% 18px,100% 18px,100% 18px,auto
31  }
32
33  66.67% {
34    -webkit-mask-size: 0    18px,100% 18px,100% 18px,auto
35  }
36
37  83.33% {
38    -webkit-mask-size: 0    18px,0    18px,100% 18px,auto
39  }
40
41  100% {
42    -webkit-mask-size: 0    18px,0    18px,0    18px,auto
43  }
44}