:root{--size: 2.5em;--thickness: .5em;--color-1: hsla(337, 84%, 48%, .75);--color-2: hsla(160, 50%, 48%, .75);--color-3: hsla(190, 61%, 65%, .75);--color-4: hsla(41, 82%, 52%, .75);--lat: calc((var(--size) - var(--thickness)) / 2);--offset: calc(var(--lat) - var(--thickness))}.loader{position:absolute;top:calc(50% - (var(--size) / 2));left:calc(50% - (var(--size) / 2));width:var(--size);height:var(--size);transform:rotate(165deg)}.loader:before,.loader:after{content:"";position:absolute;top:50%;left:50%;display:block;width:var(--thickness);height:var(--thickness);border-radius:50%;transform:translate(-50%,-50%)}.loader:before{animation:before 2s infinite}.loader:after{animation:after 2s infinite}@keyframes before{0%{width:var(--thickness);box-shadow:var(--lat) calc(-1 * var(--offset)) var(--color-1),calc(-1 * var(--lat)) var(--offset) var(--color-3)}35%{width:var(--size);box-shadow:0 calc(-1 * var(--offset)) var(--color-1),0 var(--offset) var(--color-3)}70%{width:var(--thickness);box-shadow:calc(-1 * var(--lat)) calc(-1 * var(--offset)) var(--color-1),var(--lat) var(--offset) var(--color-3)}to{box-shadow:var(--lat) calc(-1 * var(--offset)) var(--color-1),calc(-1 * var(--lat)) var(--offset) var(--color-3)}}@keyframes after{0%{height:var(--thickness);box-shadow:var(--offset) var(--lat) var(--color-2),calc(-1 * var(--offset)) calc(-1 * var(--lat)) var(--color-4)}35%{height:var(--size);box-shadow:var(--offset) 0 var(--color-2),calc(-1 * var(--offset)) 0 var(--color-4)}70%{height:var(--thickness);box-shadow:var(--offset) calc(-1 * var(--lat)) var(--color-2),calc(-1 * var(--offset)) var(--lat) var(--color-4)}to{box-shadow:var(--offset) var(--lat) var(--color-2),calc(-1 * var(--offset)) calc(-1 * var(--lat)) var(--color-4)}}