ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Стильный загрузчик (preloader) CSS3 для сайта

Стильный загрузчик (preloader) CSS3 для сайта

Интересный по дизайн создан загрузчик, который был создан на чистом CSS и подойдет на разные по стилистике сайт, что темный или светлый. Думаю вы многие встречали, когда хотели скачать файл, то автоматически подключается загрузчик, а точнее изображение которое создано на стилях. Что намного лучше и безусловно стильно смотрится на любой интернет площадке. Возможно кто то может его применить и на загрузку странице, что аналогично будет смотреться.

Если вам такой формат не подходит, то на официальном сайте вы можете подобрать тот формат, что больше вам понравится или подойдет на портал, ссылка ниже представлена будет. Что работает, то все будет продемонстрировано, остается только установить. Здесь большое отличие от формата GIF, то здесь можно самому в стилях вывести форматирование как вы видите, а это тоже изменение скорости.

Приступаем к установке:

В CSS можно в самый низ прописать.

Код

.circle {
  background-color: rgba(0, 0, 0, 0);
  border:5px solid rgba(0, 183, 229, 0.9);
  opacity:.9;
  border-right:5px solid rgba(0, 0, 0, 0);
  border-left:5px solid rgba(0, 0, 0, 0);
  border-radius:50px;
  box-shadow: 0 0 35px #2187e7;
  width:50px;
  height:50px;
  margin:50px;
  -moz-animation:spinPulse 2s infinite ease-in-out;
  -webkit-animation:spinPulse 2s infinite linear;
  }
  .circle1 {
  background-color: rgba(0, 0, 0, 0);
  border:5px solid rgba(0, 183, 229, 0.9);
  opacity:.9;
  border-left:5px solid rgba(0, 0, 0, 0);
  border-right:5px solid rgba(0, 0, 0, 0);
  border-radius:50px;
  box-shadow: 0 0 15px #2187e7;
  width:30px;
  height:30px;
  margin:60px;
  position:relative;
  top:-110px;
  -moz-animation:spinoffPulse 3s infinite linear;
  -webkit-animation:spinoffPulse 3s infinite linear;
  }
  @-moz-keyframes spinPulse {
  0% {
  -moz-transform:rotate(160deg);
  opacity:0;
  box-shadow:0 0 1px #2187e7;
  }
  50% {
  -moz-transform:rotate(145deg);
  opacity:1;
  }
  100% {
  -moz-transform:rotate(-320deg);
  opacity:0;
  }
  }
  @-moz-keyframes spinoffPulse {
  0% {
  -moz-transform:rotate(0deg);
  }
  100% {
  -moz-transform:rotate(360deg);
  }
  }
  @-webkit-keyframes spinPulse {
  0% {
  -webkit-transform:rotate(160deg);
  opacity:0;
  box-shadow:0 0 1px #2187e7;
  }
  50% {
  -webkit-transform:rotate(145deg);
  opacity:1;
  }
  100% {
  -webkit-transform:rotate(-320deg);
  opacity:0;
  }
  }
  @-webkit-keyframes spinoffPulse {
  0% {
  -webkit-transform:rotate(0deg);
  }
  100% {
  -webkit-transform:rotate(360deg);
  }
  }

Теперь остается поставить код на ту страницу, где будет производиться.

Выбрать другой стиль загрузчика: www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-loading-animation-loop/index.html

Код

Смотрим как визуально будет этот эффект работать.

14 Июня 2017 Просмотров: 2511 Комментариев: (4)

Поделиться в социальных сетях

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 4
Порядок вывода комментариев: Scheme 15 Июня 2017 02:57¹ 0 Это хорошо когда прямо здесь представлено DEMO, но не открыто до конца, как что ставить или заменять. Только сказано на странице, если в них сайта поставить, так на всех страницах будет. Kosten 15 Июня 2017 03:18² 0 Не разу не устанавливал на скачивание, на загрузку страницу ставил, но потом снял, просто один баннер счетчика завис и страница очень долга грузилась. Critic© 05 Июля 2017 19:58³ 0 Согласен что загрузчик эффектный пойдет для синего либо темного фона Kosten 05 Июля 2017 21:15⁴ 0 Что синий, просто они как темно зеленый и этот цвет, хорошо считается с черным, но здесь еще сам эффект какой будет, и можно ставить на загрузку страницы, но кто в теме, или на другую функцию, где приходиться какое то ожидание, что немного времени.