@layer components{.spinner-wrapper{height:var(--spinner-size,20px);width:var(--spinner-size,20px);place-self:center;display:flex;position:relative}.spinner-wrapper .spinner-bars{height:var(--spinner-size,20px);width:var(--spinner-size,20px);position:relative;top:50%;left:50%;transform:translate(-50%,-50%)}.spinner-wrapper .bar{border-radius:6px;width:24%;height:8%;animation:1.2s linear infinite spinner-spin;position:absolute;top:20%;left:20%}.spinner-wrapper .bar:first-child{animation-delay:-1.2s;transform:rotate(.0001deg)translate(146%)}.spinner-wrapper .bar:nth-child(2){animation-delay:-1.1s;transform:rotate(30deg)translate(146%)}.spinner-wrapper .bar:nth-child(3){animation-delay:-1s;transform:rotate(60deg)translate(146%)}.spinner-wrapper .bar:nth-child(4){animation-delay:-.9s;transform:rotate(90deg)translate(146%)}.spinner-wrapper .bar:nth-child(5){animation-delay:-.8s;transform:rotate(120deg)translate(146%)}.spinner-wrapper .bar:nth-child(6){animation-delay:-.7s;transform:rotate(150deg)translate(146%)}.spinner-wrapper .bar:nth-child(7){animation-delay:-.6s;transform:rotate(180deg)translate(146%)}.spinner-wrapper .bar:nth-child(8){animation-delay:-.5s;transform:rotate(210deg)translate(146%)}.spinner-wrapper .bar:nth-child(9){animation-delay:-.4s;transform:rotate(240deg)translate(146%)}.spinner-wrapper .bar:nth-child(10){animation-delay:-.3s;transform:rotate(270deg)translate(146%)}.spinner-wrapper .bar:nth-child(11){animation-delay:-.2s;transform:rotate(300deg)translate(146%)}.spinner-wrapper .bar:nth-child(12){animation-delay:-.1s;transform:rotate(330deg)translate(146%)}}@keyframes spinner-spin{0%{opacity:1}to{opacity:.15}}