How to make loading animation in CSS?

Question

css

Good evening, comrades.
I would like to know how to make something similar to the loading animation, as in android.
Made this code:

<div id="circle">
        <center><div id="null"></div></center>
</div>

#circle {
    width: 100px; 
    height: 100px;
    background: #83A7C9;
    border-radius: 50%;

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#null {
    width: 80px; 
    height: 80px;
    background: #FFFFFF;
    border-radius: 50%;

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Everything outputs correctly. But I would like to know: is it possible to display some element only on circle? Or is it better to just insert some gif in this case?

Answer 1

poke