#loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
    animation: rotationAnimation 0.8s infinite;
    animation-timing-function: linear;
}

#loader div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 70px;
    height: 70px;
    margin: -3px;
    border: 2px solid;
    border-radius: 100%;
    border-color: #FFFFFF transparent transparent transparent; /* Makes it so that only 90 degrees of the circle has an outline */
}

#loader div:nth-child(1) {
    animation: slice2Animation 2s infinite;
}
#loader div:nth-child(2) {
    animation: slice3Animation 2s infinite;
}

@keyframes rotationAnimation {
    0% {transform: translate(-50%, -50%) rotate(0deg)}
    100% {transform: translate(-50%, -50%) rotate(360deg)}
}
@keyframes slice2Animation {
    0% {transform: rotate(0deg)}
    60% {transform: rotate(-90deg)}
    100% {transform: rotate(0deg)}
}
@keyframes slice3Animation {
    0% {transform: rotate(0deg)}
    60% {transform: rotate(-180deg)}
    100% {transform: rotate(0deg)}
}