.loader{position:relative;width:100px;height:100px}.loader__bar{position:absolute;bottom:0;width:15px;height:50%;background:#000;transform-origin:center bottom;box-shadow:1px 1px 0 rgba(0,0,0,.2)}.loader__bar:first-child{left:0;transform:scaleY(.2);animation:barUp1 4s infinite}.loader__bar:nth-child(2){left:15px;transform:scaleY(.4);animation:barUp2 4s infinite}.loader__bar:nth-child(3){left:30px;transform:scaleY(.6);animation:barUp3 4s infinite}.loader__bar:nth-child(4){left:45px;transform:scaleY(.8);animation:barUp4 4s infinite}.loader__bar:nth-child(5){left:60px;transform:scale(1);animation:barUp5 4s infinite}.loader__ball{position:absolute;bottom:10px;left:0;width:13px;height:13px;border-radius:50%;animation:ball624 4s infinite}@keyframes ball624{0%{transform:translate(0);background:red}5%{transform:translate(8px,-14px)}10%{transform:translate(15px,-10px)}17%{transform:translate(23px,-24px)}20%{transform:translate(30px,-20px)}27%{transform:translate(38px,-34px)}30%{transform:translate(45px,-30px)}37%{transform:translate(53px,-44px)}40%{transform:translate(60px,-40px)}50%{transform:translate(60px);background:blue}57%{transform:translate(53px,-14px)}60%{transform:translate(45px,-10px)}67%{transform:translate(37px,-24px)}70%{transform:translate(30px,-20px)}77%{transform:translate(22px,-34px)}80%{transform:translate(15px,-30px)}87%{transform:translate(7px,-44px)}90%{transform:translateY(-40px)}to{transform:translate(0);background:red}}@keyframes barUp1{0%{transform:scaleY(.2)}40%{transform:scaleY(.2)}50%{transform:scale(1)}90%{transform:scale(1)}to{transform:scaleY(.2)}}@keyframes barUp2{0%{transform:scaleY(.4)}40%{transform:scaleY(.4)}50%{transform:scaleY(.8)}90%{transform:scaleY(.8)}to{transform:scaleY(.4)}}@keyframes barUp3{0%{transform:scaleY(.6)}to{transform:scaleY(.6)}}@keyframes barUp4{0%{transform:scaleY(.8)}40%{transform:scaleY(.8)}50%{transform:scaleY(.4)}90%{transform:scaleY(.4)}to{transform:scaleY(.8)}}@keyframes barUp5{0%{transform:scale(1)}40%{transform:scale(1)}50%{transform:scaleY(.2)}90%{transform:scaleY(.2)}to{transform:scale(1)}}.ball{position:relative;bottom:50px;left:calc(100% - 20px);width:50px;height:50px;background:#000;border-radius:50%;animation:ball-move8234 3s ease-in-out 1s infinite alternate}.ball:after{position:absolute;content:"";top:25px;right:5px;width:5px;height:5px;background:#fff;border-radius:50%}.bar{width:200px;height:12.5px;background:#ffdaaf;border-radius:30px;transform:rotate(-15deg);animation:up-down6123 3s ease-in-out 1s infinite alternate}@keyframes up-down6123{0%{transform:rotate(-15deg)}to{transform:rotate(15deg)}}@keyframes ball-move8234{0%{left:calc(100% - 40px);transform:rotate(1turn)}to{left:calc(0% - 20px);transform:rotate(0deg)}}