#e8e8e8
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}
1.1K views
1.1K views
Comments
MIT License