аватар |

Статьи / 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!)
 



Распечатать
Похожие статьи
06 декабря 2013 15:06 Как сделать обтекание изображения (картинки) текстом средствами CSS?
05 сентября 2013 16:22 Как заменить изображение при наведении на него курсора? CSS
31 мая 2017 18:46 Как создать индикатор (полосу) прокрутки страницы на CSS3?
15 мая 2017 18:13 Как сделать видео фоном блока на CSS?
27 ноября 2013 20:20 Как сделать элемент чёрно-белым и обратно цветным средствами CSS?


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