:root{--dot-size:12px;--dot-color:#39e6a8;--animation-duration:4s;--loader-size:100px;--inner-circle-size:37px}.loader-container{justify-content:center;align-items:center;width:100%;display:flex;position:relative}.loader{width:var(--loader-size);height:var(--loader-size);justify-content:center;align-items:center;animation:12s linear infinite rotate;display:flex;position:relative}.dot{width:var(--dot-size);height:var(--dot-size);background-color:var(--dot-color);opacity:0;animation:fadeInOut var(--animation-duration)ease-in-out infinite,moveCircle 2s linear infinite;border-radius:50%;position:absolute}.dot:first-child{animation-delay:0s}.dot:nth-child(2){animation-delay:.25s}.dot:nth-child(3){animation-delay:.5s}.dot:nth-child(4){animation-delay:.75s}.dot:nth-child(5){animation-delay:1s}.dot:nth-child(6){animation-delay:1.25s}.dot:nth-child(7){animation-delay:1.5s}.dot:nth-child(8){animation-delay:1.75s}.loader-image{width:var(--inner-circle-size);height:var(--inner-circle-size);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes moveCircle{0%{transform:rotate(0)translate(30px)rotate(0)}to{transform:rotate(360deg)translate(30px)rotate(-360deg)}}@keyframes fadeInOut{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}