Главная » Файлы » Прочие скрипты » CSS

Эффектный загрузчик (preloader) на CSS3 для вашего сайта
14.11.14, 22:54:05



Очень интересный загрузчик, реализованный на чистом css для вашего сайта!

Для начала посмотрите ДЕМО

Моё тестирование в фидле: КЛИК

Установка:

В самый низ вашего css вставляйте:
Код
/* Second Loadin Circle */  
  .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);  
  }  
  }


В то место страницы, где должен быть загрузчик, вставляйте:
Код
<div class="circle"></div>  
  <div class="circle1"></div>


Остальные анимации, которые представлены в демо, можете взять из его исходника

Материал подготовлен Apocalypse

Категория: CSS | Добавил: Apocalypse | Теги: CSS, чистом, на, Загрузчик, Вашего, Эффектный, (preloader), сайта, для
Просмотров: 801 | Загрузок: 0 | Рейтинг: 1.0/1
Всего комментариев: 0
Имя *:
Email: