@keyframes spin-rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } .semi-circle-spin { position: relative; width: 35px; height: 35px; overflow: hidden; } .semi-circle-spin > div { position: absolute; border-width: 0px; border-radius: 100%; animation: spin-rotate 0.6s 0s infinite linear; background-image: linear-gradient(transparent 0%, transparent 70%, #6B6F82 30%, #6B6F82 100%); width: 100%; height: 100%; }