.container{height:100vh;width:full;font-family:Helvetica;display:flex;justify-content:center;align-items:center}.loader{height:20px;width:250px;position:relative}.loader--dot{animation:loader 3s ease-in-out infinite;height:20px;width:20px;border-radius:100%;background-color:#000;position:absolute;border:2px solid #fff}.loader--dot:first-child{background-color:#8cc759;animation-delay:.5s}.loader--dot:nth-child(2){background-color:#8c6daf;animation-delay:.4s}.loader--dot:nth-child(3){background-color:#ef5d74;animation-delay:.3s}.loader--dot:nth-child(4){background-color:#f9a74b;animation-delay:.2s}.loader--dot:nth-child(5){background-color:#60beeb;animation-delay:.1s}.loader--dot:nth-child(6){background-color:#fbef5a;animation-delay:0s}.loader--text{position:absolute;top:calc(20px*2);left:0;right:0;width:4rem;margin:0 auto;text-align:center}.loader--text:after{content:"Loading";font-weight:700;animation:loading-text 3s infinite}@keyframes loader{0%,95%{transform:translateX(0)}45%{transform:translateX(calc(250px - 20px))}65%{transform:translateX(calc(250px - 20px))}}@keyframes loading-text{0%{content:"Loading"}25%{content:"Loading."}50%{content:"Loading.."}75%{content:"Loading..."}}