Loader by ChaudaryHammad
#e8e8e8
1.loader { 2 width: 50px; 3 aspect-ratio: 1.154; 4 position: relative; 5 background: conic-gradient(from 120deg at 50% 64%,#0000, #ff1919 1deg 120deg,#0000 121deg); 6 animation: l27-0 1.5s infinite cubic-bezier(0.3,1,0,1); 7} 8 9.loader:before, 10.loader:after { 11 content: ''; 12 position: absolute; 13 inset: 0; 14 background: inherit; 15 transform-origin: 50% 66%; 16 animation: l27-1 1.5s infinite; 17} 18 19.loader:after { 20 --s: -1; 21} 22 23@keyframes l27-0 { 24 0%,30% { 25 transform: rotate(0) 26 } 27 28 70% { 29 transform: rotate(120deg) 30 } 31 32 70.01%,100% { 33 transform: rotate(360deg) 34 } 35} 36 37@keyframes l27-1 { 38 0% { 39 transform: rotate(calc(var(--s,1)*120deg)) translate(0) 40 } 41 42 30%,70% { 43 transform: rotate(calc(var(--s,1)*120deg)) translate(calc(var(--s,1)*-5px),10px) 44 } 45 46 100% { 47 transform: rotate(calc(var(--s,1)*120deg)) translate(0) 48 } 49} 50 51 52
442 views
442 views
Variations
1 MIT License