аватар |

Статьи / CSS /

Как вызвать кроссбраузерную анимацию загрузки на CSS 3?

Как же сделать кроссбраузерную анимацию загрузки на CSS3? В этой статье мы рассмотрим пример. Не надо использовать gif и прочие вещи. Всё можно осуществить при помощи свойств CSS 3, которые поддерживаются всеми основными браузерами.



Разбор примера анимации с демонстрацией


Создаём блок div в html и присваиваем ему класс:

<div class="spinner"></div>

Теперь перейдем к стилям

@keyframes spin {
  100% {
   transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
 100% { -moz-transform:rotate(360deg); }
}

@-webkit-keyframes spin {
 100% { -webkit-transform:rotate(360deg); }
}

@-ms-keyframes spin {
 100% { -ms-transform:rotate(360deg); }
}

@-o-keyframes spin {
 100% { -o-transform:rotate(360deg); }
}

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

  -moz-animation: spin 600ms infinite linear;
  -o-animation: spin 600ms infinite linear;
  -webkit-animation: spin 600ms infinite linear;
  -ms-animation: spin 600ms infinite linear;
}

Дописаны свойства для других браузеров. Не будем огорчать посетителей с Оперы или Мозиллы пустотой)
Для каких браузеров: Safari 5, Firefox 5+, Opera 12+, Chrome, IE 10+
Всё готово! Тестируем!

Демонстрация Скачать исходники


Как всё работает?
Мы создали блок. Указали его высоту и ширину. Затем создали сплошную границу в 6 пикселей. Левую и нижнюю рамку сделали другими цветами, светлее. Потом с помощью radius превращаем элемент в круг. Остаётся только заставить элемент вращаться по кругу с помощью линейного вращения в css3.


Всё готово! Спасибо за внимание! И избегайте лишних анимированных gif!)
 



Распечатать
Похожие статьи
16 октября 2014 12:40 Как закрепить футер или подвал внизу web-страницы CSS?
11 марта 2013 14:15 Как создать div блок с прокруткой?
28 ноября 2014 12:57 Плавное увеличение изображения при наведении CSS
08 июня 2017 12:54 Как изменить цвет текста-подсказки в placeholder с помощью стилей CSS?
27 ноября 2013 20:20 Как сделать элемент чёрно-белым и обратно цветным средствами CSS?


Комментарии к статье (vk.com)