Материал
По возможности мы всех призываем указывать источник материала если вы нашли у нас что-то дейстительно интересное и новое для себя.

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

Источник
Ссылки

Используйте быстрые ссылки для вставки в сообщениях форума.

Ccылка
BB-Code
HTML-код

Google Preloader для uCoz

Дата и время публикации : 25.Апр.17 в 01:21 | Раздел : Прелоадеры для uCoz

Параметр Значение
Дата публик. 25.Апр.17, Вторник, 01:21
Адапт. дизайн
Обновления Не производились
Просмотрен 176

Если вам нужен на сайт прелоадер - это загрузчик страницы, то данная реализация вам должна быть по вкусу. Весь элемент выполнен на чистом CSS коде и поддерживает шрифтовые иконки FontAwesome. 

Установка :

В вверхнюю часть сайта :

<div class="load1"> 
  <div class="load2"> 
  <div class="load3"> 
  <div class="load4"> 
  <div class="load5"> 
  <div class="load6"> 
  </div> 
  </div> 
  </div> 
  </div> 
  </div> 
  </div> 
  <i class="fa fa-google"></i>


В CSS :

.load1 { 
  width: 200px; 
  height: 200px; 
  border-style: solid; 
  border-width: 3px; 
  border-top-color: #4885ed; 
  border-right-color: lightyellow; 
  border-bottom-color: lightyellow; 
  border-left-color: #4885ed; 
  border-radius: 50%; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
  justify-content: center; 
  -webkit-box-align: center; 
  align-items: center; 
  display: -webkit- flex; 
  display: -ms- flex; 
  display: flex; 
  -ms-flex-pack: center; 
  justify-content: center; 
  -ms-flex-align: center; 
  align-items: center; 
  -webkit-animation: spin1 1.8s linear infinite; 
  animation: spin1 1.8s linear infinite; 
  } 
   
  .load2 { 
  width: 180px; 
  height: 180px; 
  border-style: solid; 
  border-width: 3px; 
  border-top-color: lightyellow; 
  border-right-color: #db3236; 
  border-bottom-color: #db3236; 
  border-left-color: lightyellow; 
  border-radius: 50%; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
  justify-content: center; 
  -webkit-box-align: center; 
  align-items: center; 
  display: -webkit- flex; 
  display: -ms- flex; 
  display: flex; 
  -ms-flex-pack: center; 
  justify-content: center; 
  -ms-flex-align: center; 
  align-items: center; 
  -webkit-animation: spin2 1.2s linear infinite; 
  animation: spin2 1.2s linear infinite; 
  } 
   
  .load3 { 
  width: 160px; 
  height: 160px; 
  border-style: solid; 
  border-width: 3px; 
  border-top-color: #f4c20d; 
  border-right-color: lightyellow; 
  border-bottom-color: lightyellow; 
  border-left-color: #f4c20d; 
  border-radius: 50%; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
  justify-content: center; 
  -webkit-box-align: center; 
  align-items: center; 
  display: -webkit- flex; 
  display: -ms- flex; 
  display: flex; 
  -ms-flex-pack: center; 
  justify-content: center; 
  -ms-flex-align: center; 
  align-items: center; 
  -webkit-animation: spin1 1.4s linear infinite; 
  animation: spin1 1.4s linear infinite; 
  } 
   
  .load4 { 
  width: 140px; 
  height: 140px; 
  border-style: solid; 
  border-width: 3px; 
  border-top-color: lightyellow; 
  border-right-color: #4885ed; 
  border-bottom-color: #4885ed; 
  border-left-color: lightyellow; 
  border-radius: 50%; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
  justify-content: center; 
  -webkit-box-align: center; 
  align-items: center; 
  display: -webkit- flex; 
  display: -ms- flex; 
  display: flex; 
  -ms-flex-pack: center; 
  justify-content: center; 
  -ms-flex-align: center; 
  align-items: center; 
  -webkit-animation: spin2 1.6s linear infinite; 
  animation: spin2 1.6s linear infinite; 
  } 
   
  .load5 { 
  width: 120px; 
  height: 120px; 
  border-style: solid; 
  border-width: 3px; 
  border-top-color: #3cba54; 
  border-right-color: lightyellow; 
  border-bottom-color: lightyellow; 
  border-left-color: #3cba54; 
  border-radius: 50%; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
  justify-content: center; 
  -webkit-box-align: center; 
  align-items: center; 
  display: -webkit- flex; 
  display: -ms- flex; 
  display: flex; 
  -ms-flex-pack: center; 
  justify-content: center; 
  -ms-flex-align: center; 
  align-items: center; 
  -webkit-animation: spin1 2s linear infinite; 
  animation: spin1 2s linear infinite; 
  } 
   
  .load6 { 
  width: 100px; 
  height: 100px; 
  border-style: solid; 
  border-width: 3px; 
  border-top-color: lightyellow; 
  border-right-color: #db3236; 
  border-bottom-color: #db3236; 
  border-left-color: lightyellow; 
  border-radius: 50%; 
  -webkit-animation: spin2 2.3s linear infinite; 
  animation: spin2 2.3s linear infinite; 
  } 
   
  .fa { 
  position: fixed; 
  font-size: 2.3em; 
  color: #4885ed; 
  -webkit-animation: colorchange 5s 0s linear infinite; 
  animation: colorchange 5s 0s linear infinite; 
  } 
   
  @-webkit-keyframes spin1 { 
  0% { 
  -webkit-transform: rotate(0deg); 
  transform: rotate(0deg); 
  } 
  100% { 
  -webkit-transform: rotate(360deg); 
  transform: rotate(360deg); 
  } 
  } 
   
  @keyframes spin1 { 
  0% { 
  -webkit-transform: rotate(0deg); 
  transform: rotate(0deg); 
  } 
  100% { 
  -webkit-transform: rotate(360deg); 
  transform: rotate(360deg); 
  } 
  } 
   
  @-webkit-keyframes spin2 { 
  0% { 
  -webkit-transform: rotate(0deg); 
  transform: rotate(0deg); 
  } 
  100% { 
  -webkit-transform: rotate(-360deg); 
  transform: rotate(-360deg); 
  } 
  } 
   
  @keyframes spin2 { 
  0% { 
  -webkit-transform: rotate(0deg); 
  transform: rotate(0deg); 
  } 
  100% { 
  -webkit-transform: rotate(-360deg); 
  transform: rotate(-360deg); 
  } 
  } 
   
  @-webkit-keyframes colorchange { 
  10% { 
  color: #4885ed; 
  } 
  20% { 
  color: #db3236; 
  } 
  40% { 
  color: #f4c20d; 
  } 
  60% { 
  color: #4885ed; 
  } 
  80% { 
  color: #3cba54; 
  } 
  90% { 
  color: #db3236; 
  } 
  100% { 
  color: #4885ed; 
  } 
  } 
   
  @keyframes colorchange { 
  10% { 
  color: #4885ed; 
  } 
  20% { 
  color: #db3236; 
  } 
  40% { 
  color: #f4c20d; 
  } 
  60% { 
  color: #4885ed; 
  } 
  80% { 
  color: #3cba54; 
  } 
  90% { 
  color: #db3236; 
  } 
  100% { 
  color: #4885ed; 
  } 
  }

На данный момент никто не оставил комментариев.

Оставить комментарий :

Требуется войти в свой аккаунт.

Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.

Вход Регистрация

Смотрите также :

Wonde - универсальный бизнес шаблон для uCoz

Бесплатный новостной шаблон сайта в стиле минимализма. Хорошее решение для ведения своего блога или портала новостей. Все чисто и аккуратно.