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