Recreation Officemag spinner on CSS

by SerGen

HTML

<div class="Spinner">
    <div class="Spinner__wrapper">
        <div class="Spinner__side Spinner__side--first"></div>
        <div class="Spinner__side Spinner__side--second"></div>
    </div>
</div>

CSS

html,
body {
    height: 100%;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.Spinner {
    animation: Spinner 5s linear infinite;
    will-change: color;
}
.Spinner__wrapper {
    animation: Spinner__wrapper .75s linear infinite;
    position: relative;
    height: 3em;
    width: 3em;
    will-change: transform;
}
.Spinner__side {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}
.Spinner__side--first {
    left: 0;
}
.Spinner__side--second {
    right: 0;
}
.Spinner__side:after {
    border-radius: 100%;
    box-sizing: border-box;
    border: 2px solid;
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 200%;
    will-change: transform;
}
.Spinner__side--first:after {
    left: 0;
    clip: rect(0, 1.5em, auto, auto);
    animation: Spinner__side--second 1.5s infinite alternate;
}
.Spinner__side--second:after {
    right: 0;
    clip: rect(0, auto, auto, 1.5em);
    animation: Spinner__side--first 1.5s infinite alternate;
}

@keyframes Spinner {
  0% { color: #fa284c; }
  25% { color: #47bc19; }
  50% { color: #048be5; }
  75% { color: #a7126a; }
  100% { color: #fa284c;}
}
@keyframes Spinner__wrapper {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes Spinner__side--first {
    100% { transform: rotate(180deg); }
}
@keyframes Spinner__side--second {
    100% { transform: rotate(-180deg); }
}