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

Параметр Значение
Категория Css скрипты
Добавил uAdministrator
Дата публикации 15.05.2024, 20:36
Размер файла
Авторский
Адапт. дизайн
Просмотрен 29

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

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

Установка:

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

Панель управления → Управление дизайном → Таблица стилей (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);  
  }  
  }

 

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

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

 

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

Теги: загрузчик, стильный, css3, (preloader)

Комментариев пока нет..

Ты можешь быть первым, кто оставит комментарий к публикации!

Всего комментариев: 0
avatar



Администратор в сети
Администратор не в сети