.loader {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite;
    transition: all .5s ease;
}

.loader::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 5px solid #fff;
    animation: prixClipFix 2s linear infinite alternate;
}

.loader.doneLoading {
    opacity: 0;
    width: 0px;
    height: 0px;
}

@keyframes rotate {
    100% {
    transform: rotate(360deg);
    }
}

@keyframes prixClipFix {
    0% {
    clip-path: polygon(
        50% 50%,
        0 0, 0 0, 0 0, 0 0, 0 0
    );
    }
    25% {
    clip-path: polygon(
        50% 50%,
        0 0,
        100% 0, 100% 0, 100% 0, 100% 0
    );
    }
    50% {
    clip-path: polygon(
        50% 50%,
        0 0,
        100% 0,
        100% 100%, 100% 100%, 100% 100%
    );
    }
    75% {
    clip-path: polygon(
        50% 50%,
        0 0,
        100% 0,
        100% 100%,
        0 100%, 0 100%
    );
    }
    100% {
    clip-path: polygon(
        50% 50%,
        0 0,
        100% 0,
        100% 100%,
        0 100%,
        0 0
    );
    }
}