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

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

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

Шестиугольные спиннеры на чистом CSS

Дата добавления: 13.03.2017 - 03:37
Добавил: Buger
Количество просмотров: 236
Количество комментариев: 0
Размер файла: 27.4Kb
Рейтинг материала: 0.0 / 0
Шестиугольные спиннеры на чистом CSS
рейтинг 0.0
/
голосов 0
Интересная реализация шестиугольных спиннеров для загрузки страниц и т.д. написанных на чистом CSS коде и имеет количество 18 видов . Не стесняйтесь их применять в своих проектах.

Демонстрация в скачанном файле.

HTML
Код
<div class='loader1'>
  <div class='spinner1'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner1'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner1'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

  <div class='loader2'>
  <div class='spinner1'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner1'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner1'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

  <div class='loader3'>
  <div class='spinner2'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner2'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner2'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

  <div class='loader4'>
  <div class='spinner1'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner1'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner1'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner2'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

  <div class='loader5'>
  <div class='spinner1'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner1'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner1'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner1'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

  <div class='loader6'>
  <div class='spinner2'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner2'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner2'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner2'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

  <div class='loader7'>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

  <div class='loader8'>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

  <div class='loader9'>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

  <div class='loader10'>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

  <div class='loader11'>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

  <div class='loader12'>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-B'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

  <div class='loader13'>
  <div class='spinner3'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

  <div class='loader14'>
  <div class='spinner3'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

  <div class='loader15'>
  <div class='spinner3'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

  <div class='loader16'>
  <div class='spinner3'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

  <div class='loader17'>
  <div class='spinner3'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

  <div class='loader18'>
  <div class='spinner3'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  <div class='spinner3'>
  <div class='container-A'>
  <div class='hex0'></div>
  <div class='hex120'></div>
  <div class='hex240'></div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
</div>


CSS
Код
<style type="text/css">
  body {
  background-color: #63a1f4;
  }
   
  .loader1, .loader2, .loader3, .loader4, .loader5, .loader6, .loader7, .loader8, .loader9, .loader10, .loader11, .loader12, .loader13, .loader14, .loader15, .loader16, .loader17, .loader18, .loader19, .loader20, .loader21, .loader22, .loader23, .loader24 {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  position: absolute;
  }
   
  .loader1 {left: 100px;top: 100px;}
  .loader2 {left: 300px;top: 100px;}
  .loader3 {left: 500px;top: 100px;}
  .loader4 {left: 700px;top: 100px;}
  .loader5 {left: 900px;top: 100px;}
  .loader6 {left: 1100px;top: 100px;}
  .loader7 {left: 100px;top: 300px;}
  .loader8 {left: 300px;top: 300px;}
  .loader9 {left: 500px;top: 300px;}
  .loader10 {left: 700px;top: 300px;}
  .loader11 {left: 900px;top: 300px;}
  .loader12 {left: 1100px;top: 300px;}
  .loader13 {left: 100px;top: 500px;}
  .loader14 {left: 300px;top: 500px;}
  .loader15 {left: 500px;top: 500px;}
  .loader16 {left: 700px;top: 500px;}
  .loader17 {left: 900px;top: 500px;}
  .loader18 {left: 1100px;top: 500px;}
  .loader19 {left: 100px;top: 700px;}
  .loader20 {left: 300px;top: 700px;}
  .loader21 {left: 500px;top: 700px;}
  .loader22 {left: 700px;top: 700px;}
  .loader23 {left: 900px;top: 700px;}
  .loader24 {left: 1100px;top: 700px;}
   
  .container-A {
  position: absolute;
  width: 75%;
  height: 75%;
  left: 12.5%;
  top: 12.5%;
  }
   
  .container-B {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  }
   
  .spinner1,
  .spinner2,
  .spinner3 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  }
   
  .spinner1 {
  animation: rotation0 4s infinite linear, resize1 4s infinite linear;
  }
   
  .spinner2 {
  animation: rotation0 4s infinite linear, resize2 4s infinite linear;
  }
   
  .spinner3 {
  animation: rotation0 6s infinite linear, resize3 6s infinite linear;
  }
   
  .hex0,
  .hex120,
  .hex240 {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 57.74%;
  left: 0;
  top: 21.13%;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  }
   
  .loader8 .hex0,
  .loader8 .hex120,
  .loader8 .hex240,
  .loader11 .hex0,
  .loader11 .hex120,
  .loader11 .hex240,
  .loader14 .hex0,
  .loader14 .hex120,
  .loader14 .hex240,
  .loader17 .hex0,
  .loader17 .hex120,
  .loader17 .hex240 {
  border-right: none;
  }
   
  .loader9 .hex0,
  .loader12 .hex0,
  .loader15 .hex0,
  .loader18 .hex0 {
  border: none;
  }
   
  .hex0 {
  animation: rotation0 4s infinite linear;
  }
   
  .hex120 {
  transform: rotate(120deg);
  animation: rotation120 4s infinite linear;
  }
   
  .hex240 {
  transform: rotate(240deg);
  animation: rotation240 4s infinite linear;
  }
   
  @keyframes rotation0 {
  0% {
  transform: rotate(0deg);
  }
  100% {
  transform: rotate(360deg);
  }
  }
   
  @keyframes rotation120 {
  0% {
  transform: rotate(120deg);
  }
  100% {
  transform: rotate(480deg);
  }
  }
   
  @keyframes rotation240 {
  0% {
  transform: rotate(240deg);
  }
  100% {
  transform: rotate(600deg);
  }
  }
   
  @keyframes resize1 {
  0%,
  50%,
  100% {
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  }
  25%,
  75% {
  width: 120%;
  height: 120%;
  left: -10%;
  top: -10%;
  }
  12.5%,
  37.5%,
  62.5%,
  87.5% {
  width: 70%;
  height: 70%;
  left: 15%;
  top: 15%;
  }
  }
   
  @keyframes resize2 {
  0%,
  33.33%,
  66.66%,
  100% {
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  }
  16.66%,
  49.99%,
  83.333% {
  width: 70%;
  height: 70%;
  left: 15%;
  top: 15%;
  }
  }
   
  @keyframes resize3 {
  0%,
  16.66%,
  33.33%,
  50%,
  66.66%,
  83.33%,
  100% {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  }
  2.77%,
  19.44%,
  36.11%,
  52.77%,
  69.44%,
  86.11% {
  width: 93.5%;
  height: 93.5%;
  top: 3.25%;
  left: 3.25%;
  }
  5.55%,
  22.22%,
  38.88%,
  55.55%,
  72.22%,
  88.88% {
  width: 84.4%;
  height: 84.4%;
  top: 7.8%;
  left: 7.8%;
  }
  8.33%,
  25%,
  41.66%,
  58.33%,
  75%,
  91.66% {
  width: 73.2%;
  height: 73.2%;
  top: 13.4%;
  left: 13.4%;
  }
  11.11%,
  27.77%,
  44.44%,
  61.11%,
  77.77%,
  94.44% {
  width: 84.4%;
  height: 84.4%;
  top: 7.8%;
  left: 7.8%;
  }
  13.88%,
  30.55%,
  47.22%,
  63.88%,
  80.55%,
  97.22% {
  width: 93.5%;
  height: 93.5%;
  top: 3.25%;
  left: 3.25%;
  }
  }
</style>


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