pppp

CSS dynamic Loading
<style>
body,
html {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}

div {
    position: relative; width: 200px; height: 200px;
    border-radius: 50%; margin: auto;
    transform: rotate(360deg);
    animation: rotate 45s infinite linear; }

div::before {
    position: absolute;
    content: ""; top: 0px; left: 0px; right: 0px; bottom: 0px;
    box-sizing: border-box;
    border-radius: 50%; border-top: 3px solid #000;
    border-left: 3px solid #000;
    border-bottom: 3px solid transparent;
    border-right: 3px solid transparent;
    transform: rotate(720deg);
    animation: rotate 3s infinite ease-out;
}

div::after {
    position: absolute;
    content: "";
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    box-sizing: border-box;
    border-radius: 50%;
    border-bottom: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #fff;
    border-left: 7px solid #fff;
    transform: rotate(720deg);
    animation: rotate 3s infinite ease-in-out;
}

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

.color::after {
    position: absolute;
    content: "";
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    box-sizing: border-box;
    border-radius: 50%;
    border-bottom: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid rgba(255, 0, 0, .8);
    border-left: 7px solid rgba(255, 0, 0, .8);
    transform: rotate(720deg);
    animation: rotate 3s infinite ease-in-out;
}
</style>

<div></div>
<div class="color"></div>