Загрузчик - очень полезный элемент для каждого веб-проекта. В основном мы используем загрузчик во время загрузки страницы или контента. Когда мы используем 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;
}
}
Демонстрация
