Как сделать анимацию загрузки в CSS?

Question

[FeeFort]

Добрый вечер, товарищи.
Хотелось бы узнать как сделать что-то похожее на анимацию загрузки, как в андроиде.
Сделал вот такой код:

<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;
}

Всё выводит корректно. Но хотелось бы узнать: возможно ли отображать какой-то элемент только на сircle? Или в этом случае лучше просто вставить какую-нибудь гифку?

Comments

[Froggyweb]

ищи прелоадер в гугле

Answer 1

[TheSnegok]

тык

Comments

[FeeFort]

Хоть и не то, что я хотел, но тоже неплохо, спасибо)

[TheSnegok]

FeeFort, ну там всё предельно ясно, анимация написана можешь настроить под себя)

[FeeFort]

TheSnegok, я настроил только повтор анимации, а когда посмотрел, что у меня получилось, то мне понравилось и решил больше ничего не менять)