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

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

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

Загрузчик как у установщика Visual Studio

Дата добавления: 13.03.2017 - 06:10
Добавил: Buger
Количество просмотров: 126
Количество комментариев: 0
Размер файла: 3.1Kb
Рейтинг материала: 0.0 / 0
Загрузчик как у установщика Visual Studio
рейтинг 0.0
/
голосов 0
Хотите иметь у себя красивый загрузчик страницы как у установщика Visual Studio? Отлично, данный материал вам пригодится.
Установка очень проста. Вы сможете изменить цвет точек по своему желанию, так как весь код написан на чистом css.

HTML
Код
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>


CSS
Код
<style type="text/css">
  body {
  background-color: #2D2D30;
  overflow: hidden;
  }
   
  .dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 20px;
  top: 50%;
  background-color: #0097FB;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  -webkit-animation: 3s linear loader infinite;
  animation: 3s linear loader infinite;
  }
   
  .dot:nth-of-type(1) {
  left: 0px;
  }
   
  .dot:nth-of-type(2) {
  left: -10px;
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
  }
   
  .dot:nth-of-type(3) {
  left: -20px;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  }
   
  .dot:nth-of-type(4) {
  left: -30px;
  -webkit-animation-delay: 0.45s;
  animation-delay: 0.45s;
  }
   
  .dot:nth-of-type(5) {
  left: -40px;
  -webkit-animation-delay: 0.60s;
  animation-delay: 0.60s;
  }
   
  @-webkit-keyframes loader {
  0%,
  20% {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  opacity: 0;
  }
  35% {
  -webkit-transform: translate(45vw, -50%);
  transform: translate(45vw, -50%);
  opacity: 1;
  }
  65% {
  -webkit-transform: translate(55vw, -50%);
  transform: translate(55vw, -50%);
  opacity: 1;
  }
  80%,
  100% {
  -webkit-transform: translate(100vw, -50%);
  transform: translate(100vw, -50%);
  opacity: 0;
  }
  }
   
  @keyframes loader {
  0%,
  20% {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  opacity: 0;
  }
  35% {
  -webkit-transform: translate(45vw, -50%);
  transform: translate(45vw, -50%);
  opacity: 1;
  }
  65% {
  -webkit-transform: translate(55vw, -50%);
  transform: translate(55vw, -50%);
  opacity: 1;
  }
  80%,
  100% {
  -webkit-transform: translate(100vw, -50%);
  transform: translate(100vw, -50%);
  opacity: 0;
  }
  }
</style>


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