.loader{--cell-size:65px;--cell-spacing:1.5px;--cells:3;--total-size:calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing)));display:flex;flex-wrap:wrap;width:var(--total-size);height:var(--total-size)}.cell{flex:0 0 var(--cell-size);margin:var(--cell-spacing);background-color:transparent;box-sizing:border-box;border-radius:4px;animation:ripple 1.5s ease infinite}.cell.d-1{animation-delay:.1s}.cell.d-2{animation-delay:.2s}.cell.d-3{animation-delay:.3s}.cell.d-4{animation-delay:.4s}.cell:first-child{--cell-color:#f7bf87}.cell:nth-child(2){--cell-color:#f3ab63}.cell:nth-child(3){--cell-color:#e44d1fdc}.cell:nth-child(4){--cell-color:#f3ab63}.cell:nth-child(5){--cell-color:#db8027}.cell:nth-child(6){--cell-color:#d44c22dc}.cell:nth-child(7){--cell-color:#e44d1fdc}.cell:nth-child(8){--cell-color:#d44c22dc}.cell:nth-child(9){--cell-color:#b44726}@keyframes ripple{0%{background-color:transparent}30%{background-color:var(--cell-color)}60%{background-color:transparent}to{background-color:transparent}}