Форма входа

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

    Уважаемые друзья и пользователи сайта ART-UCOZ!

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

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

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

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

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


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