» »

Стильный загрузчик (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

Код
<div class="circle"></div>  
  <div class="circle1"></div>

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

14.06.2017 Просмотров: 346 Комментарий: (2)

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

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

Комментарий: 2
Scheme
Scheme 15.06.2017 02:571
0
Это хорошо когда прямо здесь представлено DEMO, но не открыто до конца, как что ставить или заменять. Только сказано на странице, если в них сайта поставить, так на всех страницах будет.
Kosten
Kosten 15.06.2017 03:182
0
Не разу не устанавливал на скачивание, на загрузку страницу ставил, но потом снял, просто один баннер счетчика завис и страница очень долга грузилась.
avatar