*,:after,:before{box-sizing:border-box}.spinner{width:110px;height:110px;display:flex;justify-content:center;align-items:center;font-size:2rem;overflow:hidden;position:relative;animation:text-color 2s ease-in-out infinite alternate}.spinner-sector{position:absolute;width:100%;height:100%;border-radius:50%;border:15px solid transparent;mix-blend-mode:overlay;animation:rotate var(--duration) var(--timing) infinite;pointer-events:none}.spinner-sector-red{border-top-color:#489ad4;--duration:1s;--timing:ease-in}.spinner-sector-blue{border-left-color:#489ad4;--duration:0.5s;--timing:ease-in-out}.spinner-sector-green{border-right-color:#489ad4;--duration:2s}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes text-color{0%{color:rgba(0,0,0,1)}50%{color:rgba(0,0,0,.5)}to{color:rgba(0,0,0,.1)}}