Loader by AqFox
#212121
1.spinner { 2 --R: 28px; 3 --g1: #004dff 96%, #0000; 4 --g2: #d6d6fc 96%, #0000; 5 width: calc(2*var(--R)); 6 height: calc(2*var(--R)); 7 border-radius: 50%; 8 display: grid; 9 -webkit-mask: linear-gradient(#000 0 0); 10 animation: spinner-maxc6n 2s infinite linear; 11} 12 13.spinner::before, 14.spinner::after { 15 content: ""; 16 grid-area: 1/1; 17 width: 50%; 18 background: radial-gradient(farthest-side,var(--g1)) calc(var(--R) + 0.866*var(--R) - var(--R)) calc(var(--R) - 0.5*var(--R) - var(--R)), 19 radial-gradient(farthest-side,var(--g1)) calc(var(--R) + 0.866*var(--R) - var(--R)) calc(var(--R) - 0.5*var(--R) - var(--R)), 20 radial-gradient(farthest-side,var(--g2)) calc(var(--R) + 0.5*var(--R) - var(--R)) calc(var(--R) - 0.866*var(--R) - var(--R)), 21 radial-gradient(farthest-side,var(--g1)) 0 calc(-1*var(--R)), 22 radial-gradient(farthest-side,var(--g2)) calc(var(--R) - 0.5*var(--R) - var(--R)) calc(var(--R) - 0.866*var(--R) - var(--R)), 23 radial-gradient(farthest-side,var(--g1)) calc(var(--R) - 0.866*var(--R) - var(--R)) calc(var(--R) - 0.5*var(--R) - var(--R)), 24 radial-gradient(farthest-side,var(--g2)) calc(-1*var(--R)) 0, 25 radial-gradient(farthest-side,var(--g1)) calc(var(--R) - 0.866*var(--R) - var(--R)) calc(var(--R) + 0.5*var(--R) - var(--R)); 26 background-size: calc(2*var(--R)) calc(2*var(--R)); 27 background-repeat: no-repeat; 28} 29 30.spinner::after { 31 transform: rotate(180deg); 32 transform-origin: right; 33} 34 35@keyframes spinner-maxc6n { 36 100% { 37 transform: rotate(-1turn); 38 } 39}
939 views
939 views
MIT License