.spinner{--size:30px;--first-block-clr:#fff;--second-block-clr:#b22;--clr:#111;width:100px;height:100px;position:relative}.wrapper{background:#151414;border:2px solid #949494;border-radius:20px;flex-flow:column;justify-content:center;align-items:center;width:250px;height:250px;display:flex}.loader-text{color:#fff}.spinner:after,.spinner:before{box-sizing:border-box;content:"";width:var(--size);height:var(--size);background:var(--first-block-clr);animation:2.4s cubic-bezier(0,0,.24,1.21) infinite up;position:absolute;top:50%;left:50%}.spinner:after{background:var(--second-block-clr);top:calc(50% - var(--size));left:calc(50% - var(--size));animation:2.4s cubic-bezier(0,0,.24,1.21) infinite down}@keyframes down{0%,to{transform:none}25%{transform:translate(100%)}50%{transform:translate(100%)translateY(100%)}75%{transform:translateY(100%)}}@keyframes up{0%,to{transform:none}25%{transform:translate(-100%)}50%{transform:translate(-100%)translateY(-100%)}75%{transform:translateY(-100%)}}