[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум Kentos311 » uCoz » Скрипты для сайта » Новый вид Preloader v2 для uCoz (Этот код работает на чистом CSS)
Новый вид Preloader v2 для uCoz
Kentos311Дата: Среда, 10.01.2018, 01:38 | Сообщение # 1
Сообщений: 377
Репутация: 199
Статус: Offline

Когда будут заходить к вам посетители сайта или же пользователи, если у них до конца не загрузился сайт, то будет выходить такой прелоадер, который будет крутиться до тех пор, пока что не загрузит полную версию всего ресурса. Этот код работает на чистом CSS, и любой сможет его установить, также под себя вы сможете установить размер, цветовую гамму, скорость. Для тех у кого шаблон набит различными скриптами, то не рекомендую устанавливать!, так как он может загружать намного дольше обычного, и при этом никто не сможет посмотреть сайт.

Установка:

CSS:
Код
<style type="text/css">  
  .c {  
  position: relative;  
  -webkit-transform: rotate(-90deg);  
  transform: rotate(-90deg);  
  }  
   
  .c .center {  
  width: 30px;  
  height: 30px;  
  background-color: #179cbb;  
  border-radius: 100%;  
  position: relative;  
  }  
   
  .c .center:after {  
  content: '';  
  position: absolute;  
  width: 100%;  
  height: 100%;  
  border-radius: 100%;  
  background-color: #179cbb;  
  -webkit-animation: center 2s infinite;  
  animation: center 2s infinite;  
  }  
   
  .c .r {  
  width: 10px;  
  height: 10px;  
  background-color: #179cbb;  
  position: absolute;  
  border-radius: 100%;  
  top: 10px;  
  left: 10px;  
  -webkit-animation: rotate 2s infinite;  
  animation: rotate 2s infinite;  
  }  
   
  .c .r1 {  
  -webkit-animation-timing-function: cubic-bezier(0.1, 0, 0, 0.9);  
  animation-timing-function: cubic-bezier(0.1, 0, 0, 0.9);  
  }  
   
  .c .r2 {  
  -webkit-animation-timing-function: cubic-bezier(0.1, 0.1, 0.8, 0.9);  
  animation-timing-function: cubic-bezier(0.1, 0.1, 0.8, 0.9);  
  }  
   
  .c .r3 {  
  -webkit-animation-timing-function: cubic-bezier(0.1, 0.2, 0.7, 0.9);  
  animation-timing-function: cubic-bezier(0.1, 0.2, 0.7, 0.9);  
  }  
   
  .c .r4 {  
  -webkit-animation-timing-function: cubic-bezier(0.1, 0.3, 0.6, 0.9);  
  animation-timing-function: cubic-bezier(0.1, 0.3, 0.6, 0.9);  
  }  
   
  .c .r5 {  
  -webkit-animation-timing-function: cubic-bezier(0.1, 0.4, 0.5, 0.9);  
  animation-timing-function: cubic-bezier(0.1, 0.4, 0.5, 0.9);  
  }  
   
  @-webkit-keyframes center {  
  to {  
  -webkit-transform: scale(3);  
  transform: scale(3);  
  opacity: 0;  
  }  
  }  
   
  @keyframes center {  
  to {  
  -webkit-transform: scale(3);  
  transform: scale(3);  
  opacity: 0;  
  }


HTML:
Код
<div class="c">  
  <div class="center">  
  <div class="r r1"></div>  
  <div class="r r2"></div>  
  <div class="r r3"></div>  
  <div class="r r4"></div>  
  <div class="r r5"></div>  
  </div>  
  </div>
Прикрепления: 2875571.gif(112Kb)
 
Форум Kentos311 » uCoz » Скрипты для сайта » Новый вид Preloader v2 для uCoz (Этот код работает на чистом CSS)
Страница 1 из 11
Поиск: