*,:after,:before{box-sizing:border-box}.spinner{justify-content:center;align-items:center;width:100px;height:100px;font-size:2rem;animation:2s ease-in-out infinite alternate text-color;display:flex;position:relative;overflow:hidden}.spinner-sector{mix-blend-mode:overlay;width:100%;height:100%;animation:rotate var(--duration) var(--timing) infinite;pointer-events:none;border:10px solid #0000;border-radius:50%;position:absolute}.spinner-sector-red{--duration:1.5s;--timing:ease-in-out;border-top-color:#c433c4}.spinner-sector-blue{--duration:2s;--timing:ease-in;border-left-color:#ce730a}.spinner-sector-green{--duration:2.5s;--timing:ease-out;border-right-color:#4badce}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes text-color{0%{color:#000}50%{color:#00000080}to{color:#0000001a}}