• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать анимацию загрузчика с помощью CSS (Создание плавной последовательной анимации CSS)
Создать анимацию загрузчика с помощью CSS
Kosten
Дата: Четверг, 2019-11-14, 21:44 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25282
Награды: 58


Загрузчик - очень полезный элемент для каждого веб-проекта. В основном мы используем загрузчик во время загрузки страницы или контента. Когда мы используем Ajax для обновления частей веб-страницы, требуется некоторое время, чтобы получить соответствующий контент. В этой ситуации preloader является идеальным выбором для уведомления пользователя об ожидании.

Вы можете использовать изображение в качестве предварительного загрузчика или создать загрузчик CSS. Если вы хотите сделать анимацию загрузчика с помощью CSS , этот учебник поможет вам создать простую и легкую анимацию загрузчика. Здесь мы приведем небольшой фрагмент кода CSS для создания простого загрузчика с помощью CSS и HTML.

Стиль загрузчика 1

Следующий CSS генерирует загрузчик блесны. Вы можете изменить цвет и размер загрузчика в соответствии с макетом вашего сайта.

HTML

Код
<div class="loader"></div>

CSS

Код
.loader {
    border-top: 16px solid #4285F4;
    border-right: 16px solid #EA4335;
    border-bottom: 16px solid #FBBC05;
    border-left: 16px solid #34A853;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
}
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@-webkit-keyframes rotate {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}


Стиль погрузчика 2

Следующий CSS генерирует анимированный загрузчик. Вы можете изменить цвет и размер загрузчика в соответствии с макетом вашего сайта.

HTML

Код
<div class="loader"></div>

CSS

Код
.loader, .loader:before, .loader:after {
    background: #000000;
    -webkit-animation: animate 1s infinite ease-in-out;
    animation: animate 1s infinite ease-in-out;
    width: 1em;
    height: 4em;
}
.loader {
    color: #000000;
    text-indent: -9999em;
    margin: 88px auto;
    position: relative;
    font-size: 11px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
.loader:before, .loader:after {
    position: absolute;
    top: 0;
    content: '';
}
.loader:before {
    left: -1.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.loader:after {
    left: 1.5em;
}
@-webkit-keyframes animate {
    0%, 80%, 100% {
        box-shadow: 0 0;
        height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}
@keyframes animate {
    0%, 80%, 100% {
          box-shadow: 0 0;
          height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}


Демонстрация
Прикрепления: loader-style.zip(3.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать анимацию загрузчика с помощью CSS (Создание плавной последовательной анимации CSS)
  • Страница 1 из 1
  • 1
Поиск: