Loader by Ratinax
#e8e8e8
1.loader { 2 display: flex; 3 justify-content: space-between; 4} 5 6.pac-man { 7 width: 5em; 8 aspect-ratio: 1; 9 border-radius: 50%; 10 background: radial-gradient(farthest-side,#000 98%,#0000) 1.7em 0.61em/.8em .8em no-repeat, 11 #ffcc00; 12 box-shadow: .2em -.6em 1.2em 0em inset rgba(0, 0, 0, 0.7); 13 animation: l4 .5s infinite steps(5) alternate; 14 z-index: 999; 15} 16 17.point { 18 margin-top: 2em; 19 position: absolute; 20 margin-left: .4em; 21 width: 1em; 22 height: 1em; 23 background-color: #000; 24 border-radius: 50%; 25} 26 27.p1 { 28 margin-left: 8em; 29 animation: moove-p1 2s linear infinite; 30} 31 32.p2 { 33 margin-left: 15em; 34 animation: moove-p2 2s linear infinite; 35} 36 37@keyframes moove-p1 { 38 0% { 39 margin-left: 8em; 40 } 41 42 100% { 43 margin-left: 0em; 44 } 45} 46 47@keyframes moove-p2 { 48 0% { 49 margin-left: 16em; 50 } 51 52 100% { 53 margin-left: 8em; 54 } 55} 56 57@keyframes l4 { 58 59 0% { 60 clip-path: polygon(50% 50%,100% 0,100% 0,0 0,0 100%,100% 100%,100% 100%) 61 } 62 63 100% { 64 clip-path: polygon(50% 50%,100% 65%,100% 0,0 0,0 100%,100% 100%,100% 35%) 65 } 66}
559 views
Variation of aloader
MIT License