Loader by choudhary-usman
#e8e8e8
1.loader { 2 width: 40px; 3 4 aspect-ratio: 1; 5 --c: linear-gradient(#000 0 0); 6 --m: radial-gradient(farthest-side, #000 90%, #0000); 7 background: var(--c), var(--m), var(--c); 8 background-size: 16px 8px, 10px 10px; 9 background-repeat: no-repeat; 10 animation: l20-1 1s infinite linear, l20-2 4s infinite linear -0.4s; 11} 12@keyframes l20-1 { 13 0%, 14 10% { 15 background-position: calc(50% - 8px) 50%, 50% -15px, calc(50% + 8px) 50%; 16 } 17 33% { 18 background-position: -20px 50%, 50% 50%, calc(100% + 20px) 50%; 19 } 20 66% { 21 background-position: -20px 50%, 50% calc(100% + 15px), calc(100% + 20px) 50%; 22 } 23 80%, 24 100% { 25 background-position: calc(50% - 8px) 50%, 50% calc(100% + 15px), 26 calc(50% + 8px) 50%; 27 } 28} 29@keyframes l20-2 { 30 0%, 31 24.99% { 32 transform: rotate(0); 33 } 34 25%, 35 49.99% { 36 transform: rotate(90deg); 37 } 38 50%, 39 74.99% { 40 transform: rotate(180deg); 41 } 42 75%, 43 100% { 44 transform: rotate(270deg); 45 } 46} 47
114 views
114 views
MIT License