.loader{--size:250px;--duration:2s;--logo-color:grey;--background:linear-gradient(0deg,rgba(50,50,50,0.2),rgba(100,100,100,0.2));height:var(--size);aspect-ratio:1;position:relative}.loader .box{position:absolute;background:rgba(100,100,100,.15);background:var(--background);border-radius:50%;border-top:1px solid rgba(100,100,100,1);box-shadow:0 10px 10px 0 rgba(0,0,0,.3);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:ripple var(--duration) infinite ease-in-out}.loader .box:first-child{inset:40%;z-index:99}.loader .box:nth-child(2){inset:30%;z-index:98;border-color:rgba(100,100,100,.8);animation-delay:.2s}.loader .box:nth-child(3){inset:20%;z-index:97;border-color:rgba(100,100,100,.6);animation-delay:.4s}.loader .box:nth-child(4){inset:10%;z-index:96;border-color:rgba(100,100,100,.4);animation-delay:.6s}.loader .box:nth-child(5){inset:0;z-index:95;border-color:rgba(100,100,100,.2);animation-delay:.8s}.loader .logo{position:absolute;inset:0;display:grid;place-content:center;padding:30%}.loader .logo svg{fill:var(--logo-color);width:100%;animation:color-change var(--duration) infinite ease-in-out}@keyframes ripple{0%{transform:scale(1);box-shadow:0 10px 10px 0 rgba(0,0,0,.3)}50%{transform:scale(1.3);box-shadow:0 30px 20px 0 rgba(0,0,0,.3)}to{transform:scale(1);box-shadow:0 10px 10px 0 rgba(0,0,0,.3)}}@keyframes color-change{0%{fill:var(--logo-color)}50%{fill:white}to{fill:var(--logo-color)}}