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

    Вы здесь: Главная страница » Файлы » Хаки / Дополнения
    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

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

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

    Дата добавления: 13.03.2017 - 03:37
    Добавил: Buger
    Количество просмотров: 1.4k
    Количество комментариев: 0
    Размер файла: 27.4 Kb
    Рейтинг материала: 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/
    Добавлять комментарии могут только зарегистрированные пользователи.


    Поделись с друзьями: