Frameworks.suFrameworks.su Шпаргалка вебмастера

  • Главная
  • Framework Kohana
  • PHP
  • Javascript
  • CSS
  • Сервисы
    • Генератор паролей
  • Контакты
Главная / CSS / Анимация загрузки с помощью CSS3

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

06.04.2015 0 13265

Анимация загрузки с помощью 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-.

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

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

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

Теги:
  • CSS3
  • Пример
  • Уроки

Оставить комментарий Отмена

*

*

*

*

Категории

  • PHP
    • Framework Kohana
  • Javascript
  • CSS
  • Администрирование

Теги

Framework Kohana Пример jQuery Уроки CRON Установка и настройка Backup CSS3 Валидация API Bash Cache Captcha i18n Linux

Авторизация

  • Забыли пароль?
  • Регистрация

Популярные статьи

  • Находим расстояние до ближайших станций метро

    Находим расстояние до ближайших станций метро

    17.02.2017 102828
  • Регистрация и авторизация пользователей. Модуль Auth в Kohana 3.3.x

    Регистрация и авторизация пользователей. Модуль Auth в Kohana 3.3.x

    02.07.2014 44445
  • Собственная система лайков на PHP и JQuery

    Собственная система лайков на PHP и JQuery

    06.04.2015 33128
  • Javascript — сумма прописью

    Javascript — сумма прописью

    07.07.2014 22968
  • Cross-domain ajax с помощью jQuery

    Cross-domain ajax с помощью jQuery

    24.04.2015 19840
Copyright © 2014-2025 Frameworks.su. Все права защищены.