Loader by doniaskima
#e8e8e8
1/* HTML: <div class="loader"></div> */ 2.loader { 3 width: 100px; 4 height: 60px; 5 display: flex; 6 animation: l12-0 2s infinite linear; 7} 8 9.loader::before, 10.loader::after { 11 content: ""; 12 flex: 4; 13 background: radial-gradient(at 50% 20%,#0000,#000a) bottom left/20px 20px repeat-x, 14 linear-gradient(red 0 0) bottom/100% 20px no-repeat 15 #ddd; 16 -webkit-mask: repeating-linear-gradient(90deg,#000 0 4px,#0000 0 20px) 8px 0, 17 radial-gradient(farthest-side,#000 90%,#0000) left bottom/20px 20px repeat-x; 18} 19 20.loader::after { 21 flex: 1; 22 transform-origin: top; 23 animation: l12-1 1s cubic-bezier(0,20,1,20) infinite; 24} 25 26@keyframes l12-0 { 27 28 0%,49.9% { 29 transform: scaleX(1) 30 } 31 32 50%,100% { 33 transform: scaleX(-1) 34 } 35} 36 37@keyframes l12-1 { 38 39 100% { 40 transform: rotate(-2deg) 41 } 42}
391 views
391 views
MIT License