Анимация загрузки с помощью CSS3

В данной статье рассмотрим создание анимации загрузки с помощью чистого CSS3.

HTML

Для начала создаем блок в котором будет показываться загрузка:

<div class="preloader"></div>

CSS

Теперь пропишем ему стили:

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

.preloader {
    width: 30px;
    height: 30px;
    border: 7px solid #000;
    border-left-color: #333;
    border-right-color: transparent;
    border-bottom-color: #555;
    border-radius: 100%;
    
    -webkit-animation: spin 600ms infinite linear;
    -moz-animation: spin 600ms infinite linear;
    -ms-animation: spin 600ms infinite linear;
    animation: spin 600ms infinite linear;
}

Мы сначала задали ширину и высоту блока, затем задали рамку шириной в 7px сплошным черным цветом. Далее левую и нижнюю рамку мы сделали разными цветами, а правую - прозрачной. Это делается для того чтобы эффект был более заметен. В конце мы скруглили края у блока и задали линейную анимацию, которая и вращает наш круг, делая эффект загрузки.

Чтобы использовать CSS3 анимацию, необходимо также определить ключевые кадры анимации, мы их описали в блоке @keyframes spin. Для поддержки всеми браузерами анимации мы использовали префиксы -webkit-, -ms-, -moz-.

На этом и все, наша анимация готова!

Спасибо за внимание, будут вопросы пишите в комментариях!

Скачать рабочий пример