1.semicircle,
2.semicircle div {
3  /*  Adjust the size of the entire animation here.
4      (Remove max size below to go above 300px.) */
5  width: 170px;
6  height: 170px;
7  /* Adjust the speed or timing function of the animation here. */
8  animation: 6s rotate141 infinite linear;
9  background-repeat: no-repeat;
10  border-radius: 50%;
11  position: relative;
12  overflow: hidden;
13}
14
15.semicircle div {
16  position: absolute;
17  top: 5%;
18  left: 5%;
19  width: 90%;
20  height: 90%;
21}
22
23.semicircle:before,
24.semicircle div:before {
25  content: '';
26  width: 100%;
27  height: 50%;
28  display: block;
29  background: radial-gradient(transparent, transparent 65%, #000 65%, #000);
30  background-size: 100% 200%;
31}
32
33@keyframes rotate141 {
34  to {
35    transform: rotate(360deg);
36  }
37}