30 views
CSSAdd prefixes
1.spinner { 2 --s: 9px; 3 width: 56px; 4 height: 56px; 5 background: #e73535; 6 border-radius: 20%; 7 animation: spinner-ehcge9 1.5s infinite linear; 8 clip-path: polygon(0 0,calc(50% - var(--s)) 0,50% var(--s),calc(50% + var(--s)) 0,100% 0,100% calc(50% - var(--s)),calc(100% - var(--s)) 50%,100% calc(50% + var(--s)),100% 100%,calc(50% + var(--s)) 100%, 50% calc(100% - var(--s)),calc(50% - var(--s)) 100%,0 100%,0 calc(50% + var(--s)), var(--s) 50%, 0 calc(50% - var(--s))); 9} 10 11@keyframes spinner-ehcge9 { 12 100% { 13 transform: rotate(1turn); 14 } 15}
HTML
1<div class="spinner"></div>