Loader by csemszepp
#212121
1.loader { 2 width: 50px; 3 aspect-ratio: 1; 4 display: flex; 5 color: orange; 6 background: linear-gradient(currentColor 0 0) right / 51% 100%, 7 linear-gradient(currentColor 0 0) bottom / 100% 51%; 8 background-repeat: no-repeat; 9 animation: l16-0 2s infinite linear 0.25s; 10} 11 12.loader::before { 13 content: ""; 14 width: 50%; 15 height: 50%; 16 background: currentColor; 17 animation: l16-1 0.5s infinite linear; 18} 19 20@keyframes l16-0 { 21 0%, 22 12.49% { 23 transform: rotate(0deg); 24 } 25 26 12.5%, 27 37.49% { 28 transform: rotate(90deg); 29 } 30 31 37.5%, 32 62.49% { 33 transform: rotate(180deg); 34 } 35 36 62.5%, 37 87.49% { 38 transform: rotate(270deg); 39 } 40 41 87.5%, 42 100% { 43 transform: rotate(360deg); 44 } 45} 46 47@keyframes l16-1 { 48 0% { 49 transform: perspective(80px) rotate3d(-1, -1, 0, 0); 50 } 51 52 80%, 53 100% { 54 transform: perspective(80px) rotate3d(-1, -1, 0, -180deg); 55 } 56} 57
429 views
429 views
MIT License