Loader by mobinkakei
#212121
1.loader { 2 position: relative; 3 width: 108px; 4 display: flex; 5 justify-content: space-between; 6} 7.loader::after, 8.loader::before { 9 content: ""; 10 display: inline-block; 11 width: 48px; 12 height: 48px; 13 background-color: #fff; 14 background-image: radial-gradient(circle 14px, #0d161b 100%, transparent 0); 15 background-repeat: no-repeat; 16 border-radius: 50%; 17 animation: eyeMove 10s infinite, blink 10s infinite; 18} 19@keyframes eyeMove { 20 0%, 21 10% { 22 background-position: 0px 0px; 23 } 24 13%, 25 40% { 26 background-position: -15px 0px; 27 } 28 43%, 29 70% { 30 background-position: 15px 0px; 31 } 32 73%, 33 90% { 34 background-position: 0px 15px; 35 } 36 93%, 37 100% { 38 background-position: 0px 0px; 39 } 40} 41@keyframes blink { 42 0%, 43 10%, 44 12%, 45 20%, 46 22%, 47 40%, 48 42%, 49 60%, 50 62%, 51 70%, 52 72%, 53 90%, 54 92%, 55 98%, 56 100% { 57 height: 48px; 58 } 59 11%, 60 21%, 61 41%, 62 61%, 63 71%, 64 91%, 65 99% { 66 height: 18px; 67 } 68} 69
1K views
1K views
MIT License