281 views
1.loader { 2 position: relative; 3 width: 164px; 4 height: 100px; 5 margin: 50px auto; 6} 7 8.loader div { 9 position: absolute; 10 width: 10px; 11 height: 30px; 12 background-color: #ff6a00; 13 border-radius: 5px; 14 animation: loader_51899 1.5s ease-in-out infinite; 15} 16 17.loader .bar1 { 18 left: 0px; 19 animation-delay: 0s; 20} 21 22.loader .bar2 { 23 left: 20px; 24 animation-delay: 0.15s; 25} 26 27.loader .bar3 { 28 left: 40px; 29 animation-delay: 0.3s; 30} 31 32.loader .bar4 { 33 left: 60px; 34 animation-delay: 0.45s; 35} 36 37.loader .bar5 { 38 left: 80px; 39 animation-delay: 0.6s; 40} 41 42.loader .bar6 { 43 left: 100px; 44 animation-delay: 0.75s; 45} 46 47.loader .bar7 { 48 left: 120px; 49 animation-delay: 0.9s; 50} 51 52.loader .bar8 { 53 left: 140px; 54 animation-delay: 1.05s; 55} 56 57.loader .bar9 { 58 left: 160px; 59 animation-delay: 1.2s; 60} 61 62@keyframes loader_51899 { 63 0% { 64 height: 30px; 65 transform: translate(0, 0); 66 } 67 68 50% { 69 height: 70px; 70 transform: translate(0, 35px); 71 } 72 73 100% { 74 height: 30px; 75 transform: translate(0, 0); 76 } 77}
Satwinder04
Satwinder Singh
MIT License