:root{--duration:1.5s;--container-size:250px;--box-size:33px;--box-border-radius:15%}.modern-loader-wrapper{text-align:center;display:inline-block}.loader-animation-container{width:var(--container-size);justify-content:space-between;align-items:center;max-width:100%;margin:0 auto;display:flex;position:relative}.📦{width:var(--box-size);height:var(--box-size);transform-origin:-50%;border-radius:var(--box-border-radius);display:block;position:relative}.📦:after{content:"";border-radius:var(--box-border-radius);background-color:#add8e6;width:100%;height:100%;position:absolute;top:0;right:0;box-shadow:0 0 10px #1c9fff66}.📦:first-child{animation:slide var(--duration)ease-in-out infinite alternate}.📦:first-child:after{animation:color-change var(--duration)ease-in-out infinite alternate}.📦:nth-child(2){animation:flip-1 var(--duration)ease-in-out infinite alternate}.📦:nth-child(2):after{animation:squidge-1 var(--duration)ease-in-out infinite alternate;background-color:#1c9fff}.📦:nth-child(3){animation:flip-2 var(--duration)ease-in-out infinite alternate}.📦:nth-child(3):after{animation:squidge-2 var(--duration)ease-in-out infinite alternate;background-color:#1fb1fd}.📦:nth-child(4){animation:flip-3 var(--duration)ease-in-out infinite alternate}.📦:nth-child(4):after{animation:squidge-3 var(--duration)ease-in-out infinite alternate;background-color:#22c7fb}.📦:nth-child(5){animation:flip-4 var(--duration)ease-in-out infinite alternate}.📦:nth-child(5):after{animation:squidge-4 var(--duration)ease-in-out infinite alternate;background-color:#23d3fb}@keyframes slide{0%{background-color:#1795ff;transform:translate(0)}to{transform:translatex(calc(var(--container-size) - var(--box-size)*1.25));background-color:#23d3fb}}@keyframes color-change{0%{background-color:#1c9fff;border-color:#23d3fb;box-shadow:0 0 10px #1c9fff66}50%{background-color:#1fb1fd;border-color:#22c7fb;box-shadow:0 0 20px #1c9fff33}to{background-color:#23d3fb;border-color:#1795ff;box-shadow:0 0 10px #1c9fff1a}}@keyframes flip-1{0%,15%{transform:rotate(0)}35%,to{transform:rotate(-180deg)}}@keyframes squidge-1{5%{transform-origin:bottom;transform:scaleX(1)scaleY(1)}15%{transform-origin:bottom;transform:scaleX(1.3)scaleY(.7)}25%,20%{transform-origin:bottom;transform:scaleX(.8)scaleY(1.4)}65%,to{transform-origin:top;transform:scaleX(1)scaleY(1)}40%{transform-origin:top;transform:scaleX(1.3)scaleY(.7)}}@keyframes flip-2{0%,30%{transform:rotate(0)}50%,to{transform:rotate(-180deg)}}@keyframes squidge-2{20%{transform-origin:bottom;transform:scaleX(1)scaleY(1)}30%{transform-origin:bottom;transform:scaleX(1.3)scaleY(.7)}40%,35%{transform-origin:bottom;transform:scaleX(.8)scaleY(1.4)}80%,to{transform-origin:top;transform:scaleX(1)scaleY(1)}55%{transform-origin:top;transform:scaleX(1.3)scaleY(.7)}}@keyframes flip-3{0%,45%{transform:rotate(0)}65%,to{transform:rotate(-180deg)}}@keyframes squidge-3{35%{transform-origin:bottom;transform:scaleX(1)scaleY(1)}45%{transform-origin:bottom;transform:scaleX(1.3)scaleY(.7)}55%,50%{transform-origin:bottom;transform:scaleX(.8)scaleY(1.4)}95%,to{transform-origin:top;transform:scaleX(1)scaleY(1)}70%{transform-origin:top;transform:scaleX(1.3)scaleY(.7)}}@keyframes flip-4{0%,60%{transform:rotate(0)}80%,to{transform:rotate(-180deg)}}@keyframes squidge-4{50%{transform-origin:bottom;transform:scaleX(1)scaleY(1)}60%{transform-origin:bottom;transform:scaleX(1.3)scaleY(.7)}70%,65%{transform-origin:bottom;transform:scaleX(.8)scaleY(1.4)}to,to{transform-origin:top;transform:scaleX(1)scaleY(1)}85%{transform-origin:top;transform:scaleX(1.3)scaleY(.7)}}