.container{height:20vh;width:50vw}.loader{height:20px;width:250px;position:absolute;top:0;bottom:0}[dir] .loader{margin:auto}[dir=ltr] .loader,[dir=rtl] .loader{left:0;right:0}.loader--dot{height:20px;width:20px;position:absolute}[dir] .loader--dot{border-radius:100%;background-color:#000;border:2px solid #fff}[dir=ltr] .loader--dot{animation-name:loader-ltr;animation-timing-function:ease-in-out;animation-duration:3s;animation-iteration-count:infinite}[dir=rtl] .loader--dot{animation-name:loader-rtl;animation-timing-function:ease-in-out;animation-duration:3s;animation-iteration-count:infinite}[dir] .loader--dot:first-child{background-color:#8cc759}[dir=ltr] .loader--dot:first-child,[dir=rtl] .loader--dot:first-child{animation-delay:.5s}[dir] .loader--dot:nth-child(2){background-color:#8c6daf}[dir=ltr] .loader--dot:nth-child(2),[dir=rtl] .loader--dot:nth-child(2){animation-delay:.4s}[dir] .loader--dot:nth-child(3){background-color:#ef5d74}[dir=ltr] .loader--dot:nth-child(3),[dir=rtl] .loader--dot:nth-child(3){animation-delay:.3s}[dir] .loader--dot:nth-child(4){background-color:#f9a74b}[dir=ltr] .loader--dot:nth-child(4),[dir=rtl] .loader--dot:nth-child(4){animation-delay:.2s}[dir] .loader--dot:nth-child(5){background-color:#60beeb}[dir=ltr] .loader--dot:nth-child(5),[dir=rtl] .loader--dot:nth-child(5){animation-delay:.1s}[dir] .loader--dot:nth-child(6){background-color:#fbef5a}[dir=ltr] .loader--dot:nth-child(6),[dir=rtl] .loader--dot:nth-child(6){animation-delay:0s}@keyframes loader-ltr{15%{transform:translateX(0)}45%{transform:translateX(230px)}65%{transform:translateX(230px)}95%{transform:translateX(0)}}@keyframes loader-rtl{15%{transform:translateX(0)}45%{transform:translateX(-230px)}65%{transform:translateX(-230px)}95%{transform:translateX(0)}}