Форма входа

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

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

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

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

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

    Google preloader на чистом CSS

    Дата добавления: 14.04.2017 - 05:19
    Добавил: Buger
    Количество просмотров: 1.9k
    Количество комментариев: 0
    Размер файла: 8.8 Kb
    Рейтинг материала: 5.0 / 2
    Google preloader на чистом CSS
    БЕСПЛАТНО
    Демонстрация
    рейтинг 5.0
    /
    голосов 2
    Если вам нужен на сайт прелоадер - это загрузчик страницы, то данная реализация вам должна быть по вкусу. Весь элемент выполнен на чистом CSS коде и поддерживает шрифтовые иконки FontAwesome.

    HTML
    Код
    <div class="load1">
      <div class="load2">
      <div class="load3">
      <div class="load4">
      <div class="load5">
      <div class="load6">
      </div>
      </div>
      </div>
      </div>
      </div>
      </div>
      <i class="fa fa-google"></i>


    CSS
    Код
    .load1 {
      width: 200px;
      height: 200px;
      border-style: solid;
      border-width: 3px;
      border-top-color: #4885ed;
      border-right-color: lightyellow;
      border-bottom-color: lightyellow;
      border-left-color: #4885ed;
      border-radius: 50%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      align-items: center;
      display: -webkit- flex;
      display: -ms- flex;
      display: flex;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-animation: spin1 1.8s linear infinite;
      animation: spin1 1.8s linear infinite;
      }
       
      .load2 {
      width: 180px;
      height: 180px;
      border-style: solid;
      border-width: 3px;
      border-top-color: lightyellow;
      border-right-color: #db3236;
      border-bottom-color: #db3236;
      border-left-color: lightyellow;
      border-radius: 50%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      align-items: center;
      display: -webkit- flex;
      display: -ms- flex;
      display: flex;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-animation: spin2 1.2s linear infinite;
      animation: spin2 1.2s linear infinite;
      }
       
      .load3 {
      width: 160px;
      height: 160px;
      border-style: solid;
      border-width: 3px;
      border-top-color: #f4c20d;
      border-right-color: lightyellow;
      border-bottom-color: lightyellow;
      border-left-color: #f4c20d;
      border-radius: 50%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      align-items: center;
      display: -webkit- flex;
      display: -ms- flex;
      display: flex;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-animation: spin1 1.4s linear infinite;
      animation: spin1 1.4s linear infinite;
      }
       
      .load4 {
      width: 140px;
      height: 140px;
      border-style: solid;
      border-width: 3px;
      border-top-color: lightyellow;
      border-right-color: #4885ed;
      border-bottom-color: #4885ed;
      border-left-color: lightyellow;
      border-radius: 50%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      align-items: center;
      display: -webkit- flex;
      display: -ms- flex;
      display: flex;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-animation: spin2 1.6s linear infinite;
      animation: spin2 1.6s linear infinite;
      }
       
      .load5 {
      width: 120px;
      height: 120px;
      border-style: solid;
      border-width: 3px;
      border-top-color: #3cba54;
      border-right-color: lightyellow;
      border-bottom-color: lightyellow;
      border-left-color: #3cba54;
      border-radius: 50%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      align-items: center;
      display: -webkit- flex;
      display: -ms- flex;
      display: flex;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-animation: spin1 2s linear infinite;
      animation: spin1 2s linear infinite;
      }
       
      .load6 {
      width: 100px;
      height: 100px;
      border-style: solid;
      border-width: 3px;
      border-top-color: lightyellow;
      border-right-color: #db3236;
      border-bottom-color: #db3236;
      border-left-color: lightyellow;
      border-radius: 50%;
      -webkit-animation: spin2 2.3s linear infinite;
      animation: spin2 2.3s linear infinite;
      }
       
      .fa {
      position: fixed;
      font-size: 2.3em;
      color: #4885ed;
      -webkit-animation: colorchange 5s 0s linear infinite;
      animation: colorchange 5s 0s linear infinite;
      }
       
      @-webkit-keyframes spin1 {
      0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      }
      100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
      }
      }
       
      @keyframes spin1 {
      0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      }
      100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
      }
      }
       
      @-webkit-keyframes spin2 {
      0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      }
      100% {
      -webkit-transform: rotate(-360deg);
      transform: rotate(-360deg);
      }
      }
       
      @keyframes spin2 {
      0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      }
      100% {
      -webkit-transform: rotate(-360deg);
      transform: rotate(-360deg);
      }
      }
       
      @-webkit-keyframes colorchange {
      10% {
      color: #4885ed;
      }
      20% {
      color: #db3236;
      }
      40% {
      color: #f4c20d;
      }
      60% {
      color: #4885ed;
      }
      80% {
      color: #3cba54;
      }
      90% {
      color: #db3236;
      }
      100% {
      color: #4885ed;
      }
      }
       
      @keyframes colorchange {
      10% {
      color: #4885ed;
      }
      20% {
      color: #db3236;
      }
      40% {
      color: #f4c20d;
      }
      60% {
      color: #4885ed;
      }
      80% {
      color: #3cba54;
      }
      90% {
      color: #db3236;
      }
      100% {
      color: #4885ed;
      }
      }


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


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