loading.html

<div class="components__Loader"></div>

style.css

.components__Loader{
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 125px;
    height: 125px;
    z-index: 11;
    margin: -62.5px 0px 0px -62.5px;
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
    border-color: purple transparent transparent;
    border-image: initial;
    animation: 1.7s linear 0s infinite normal none running spin;
}

.components__Loader::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
    border-color: orange transparent transparent;
    border-image: initial;
    animation: 0.7s linear 0s infinite normal none running spinReverse;
}

.components__Loader::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
    border-color: blue transparent transparent;
    border-image: initial;
    animation: 1s linear 0s infinite normal none running spin;
}

@-webkit-keyframes spin {
    0%{
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg)
    }

    100%{
        -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg)
    }
}

@keyframes spin {
    0%{
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg)
    }

    100%{
        -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg)
    }
}

@-webkit-keyframes spinReverse {
    0%{
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg)
    }

    100%{
        -webkit-transform:rotate(-360deg);
        -ms-transform:rotate(-360deg);
        transform:rotate(-360deg)
    }
}

@keyframes spinReverse {
    0%{
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg)
    }

    100%{
        -webkit-transform:rotate(-360deg);
        -ms-transform:rotate(-360deg);
        transform:rotate(-360deg)
    }
}