6 612 Скрипты / Loading

Прелоадер на CSS3


Сделаем CSS3 анимацию, которую можно будет использовать в качестве прелоадера, статуса загрузки чего-либо. Работает в Firefox, Chrome и Safari.

Для самого верхнего варианта:

HTML

Создадим два DIV:

<div class="ball"></div>
<div class="ball1"></div>

CSS

Придадим дивам форму круга и анимируем с помощью transform:rotate:

Пример по середине:

HTML

Похожа на предыдущую:

<div class="circle"></div>
<div class="circle1"></div>

CSS

Тоже, что и в первом примере, плюс добавим эффект импульса:

И нижний пример

HTML

<div id="block_1" class="barlittle"></div>
<div id="block_2" class="barlittle"></div>
<div id="block_3" class="barlittle"></div>
<div id="block_4" class="barlittle"></div>
<div id="block_5" class="barlittle"></div>

CSS

Тут используем анимацию задержки animation:delay для каждого дива:

Скачать 1197Загрузок 2,27 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи