Loader by doniaskima
#e8e8e8
1/* HTML: <div class="loader"></div> */ 2.loader { 3 width: 120px; 4 height: 20px; 5 background: linear-gradient(#000 50%,#0000 0), 6 linear-gradient(#0000 50%,#000 0), 7 linear-gradient(#000 50%,#0000 0), 8 linear-gradient(#0000 50%,#000 0), 9 linear-gradient(#000 50%,#0000 0), 10 linear-gradient(#0000 50%,#000 0) 11 #ddd; 12 background-size: calc(100%/6 + 1px) 200%; 13 background-repeat: no-repeat; 14 animation: l12 2s infinite; 15} 16 17@keyframes l12 { 18 0% { 19 background-position: calc(0*100%/5) 100%,calc(1*100%/5) 0%,calc(2*100%/5) 100%,calc(3*100%/5) 0%,calc(4*100%/5) 100%,calc(5*100%/5) 0% 20 } 21 22 16.67% { 23 background-position: calc(0*100%/5) 0%,calc(1*100%/5) 0%,calc(2*100%/5) 100%,calc(3*100%/5) 0%,calc(4*100%/5) 100%,calc(5*100%/5) 0% 24 } 25 26 33.33% { 27 background-position: calc(0*100%/5) 0%,calc(1*100%/5) 100%,calc(2*100%/5) 100%,calc(3*100%/5) 0%,calc(4*100%/5) 100%,calc(5*100%/5) 0% 28 } 29 30 50% { 31 background-position: calc(0*100%/5) 0%,calc(1*100%/5) 100%,calc(2*100%/5) 0%,calc(3*100%/5) 0%,calc(4*100%/5) 100%,calc(5*100%/5) 0% 32 } 33 34 66.67% { 35 background-position: calc(0*100%/5) 0%,calc(1*100%/5) 100%,calc(2*100%/5) 0%,calc(3*100%/5) 100%,calc(4*100%/5) 100%,calc(5*100%/5) 0% 36 } 37 38 83.33% { 39 background-position: calc(0*100%/5) 0%,calc(1*100%/5) 100%,calc(2*100%/5) 0%,calc(3*100%/5) 100%,calc(4*100%/5) 0%,calc(5*100%/5) 0% 40 } 41 42 100% { 43 background-position: calc(0*100%/5) 0%,calc(1*100%/5) 100%,calc(2*100%/5) 0%,calc(3*100%/5) 100%,calc(4*100%/5) 0%,calc(5*100%/5) 100% 44 } 45}
388 views
388 views
MIT License