.demo{ background: #7cafaf; } .loader{ width: 300px; height: 180px; margin: 40px auto; position: relative; } .loader .loader-inner{ border-radius: 2px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.1)); position: absolute; -webkit-animation: loading-1 1s ease infinite; animation: loading-1 1s ease infinite; } .loader .loader-inner:nth-child(1){ left: 0; } .loader .loader-inner:nth-child(2){ left: 40px; animation-delay: .1s; } .loader .loader-inner:nth-child(3){ left: 80px; animation-delay: .2s; } .loader .loader-inner:nth-child(4){ left: 120px; animation-delay: .3s; } .loader .loader-inner:nth-child(5){ left: 160px; animation-delay: .4s; } .loader .loader-inner:nth-child(6){ left: 200px; animation-delay: .5s; } .loader .loader-inner:nth-child(7){ left: 240px; animation-delay: .6s; } .loader .loader-inner:nth-child(8){ left: 280px; animation-delay: .7s; } @-webkit-keyframes loading-1{ 0%{ width: 20px; height: 180px; margin-top: 0; margin-left: 0; box-shadow: inset 0 1px 1px rgba(255,255,255,.2), 0 2px 2px rgba(0,0,0,.7); } 50%{ width: 26px; height: 200px; margin-left: -3px; margin-top:-10px; box-shadow: inset 0 1px 1px rgba(255,255,255,.2), 0 20px 25px rgba(0,0,0,.7); } 100%{ width: 20px; height: 180px; margin-left: 0; margin-top: 0; box-shadow: inset 0 1px 1px rgba(255,255,255,.2), 0 2px 2px rgba(0,0,0,.7); } } @keyframes loading-1{ 0%{ width: 20px; height: 180px; margin-top: 0; margin-left: 0; box-shadow: inset 0 1px 1px rgba(255,255,255,.2), 0 2px 2px rgba(0,0,0,.7); } 50%{ width: 26px; height: 200px; margin-left: -3px; margin-top:-10px; box-shadow: inset 0 1px 1px rgba(255,255,255,.2), 0 20px 25px rgba(0,0,0,.7); } 100%{ width: 20px; height: 180px; margin-left: 0; margin-top: 0; box-shadow: inset 0 1px 1px rgba(255,255,255,.2), 0 2px 2px rgba(0,0,0,.7); } }