Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Вид прелоадера для загрузки страниц на CSS

Дата добавления: 14.03.2017 - 16:48
Добавил: Buger
Количество просмотров: 206
Количество комментариев: 0
Размер файла: 5.2Kb
Рейтинг материала: 5.0 / 1
Вид прелоадера для загрузки страниц на CSS
рейтинг 5.0
/
голосов 1
Интересный и красивый прелоадер загрузки на чистом CSS коде с использованием кейфреймов для анимации. Вы сможете изменить его цветовую гамму, размер, скорость и т.д. Обязательно посмотрите демонстрацию, думаю вам понравится.

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>


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;
  }
  }
   
  @-webkit-keyframes rotate {
  0% {
  -webkit-transform: rotate(0deg) translateX(600%) rotate(0deg);
  transform: rotate(0deg) translateX(600%) rotate(0deg);
  }
  2% {
  -webkit-transform: rotate(0deg) translateX(600%) rotate(0deg);
  transform: rotate(0deg) translateX(600%) rotate(0deg);
  }
  98% {
  -webkit-transform: rotate(360deg) translateX(600%) rotate(-360deg);
  transform: rotate(360deg) translateX(600%) rotate(-360deg);
  }
  100% {
  -webkit-transform: rotate(360deg) translateX(600%) rotate(-360deg);
  transform: rotate(360deg) translateX(600%) rotate(-360deg);
  }
  }
   
  @keyframes rotate {
  0% {
  -webkit-transform: rotate(0deg) translateX(600%) rotate(0deg);
  transform: rotate(0deg) translateX(600%) rotate(0deg);
  }
  2% {
  -webkit-transform: rotate(0deg) translateX(600%) rotate(0deg);
  transform: rotate(0deg) translateX(600%) rotate(0deg);
  }
  98% {
  -webkit-transform: rotate(360deg) translateX(600%) rotate(-360deg);
  transform: rotate(360deg) translateX(600%) rotate(-360deg);
  }
  100% {
  -webkit-transform: rotate(360deg) translateX(600%) rotate(-360deg);
  transform: rotate(360deg) translateX(600%) rotate(-360deg);
  }
  }
</style>


Источник: http://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.