Если решили на сайте установить погрузчик, это когда страница загружается, то эта анимация будет на какое то время отвлекать. То это решение самое простое и как можно заметить по сети интернет популярное. Ведь такой стиль можно увидеть на многих сайтах, не говоря с какой они тематикой.
HTML
Код
<div class="pdegamuis-kacenumaqin">
<div></div>
<div></div>
<div></div>
</div>
CSS
Код
@keyframes pdegamuis-kacenumaqin {
to {
opacity: 0.1;
transform: translate3d(0, -1rem, 0);
}
}
.pdegamuis-kacenumaqin {
display: flex;
justify-content: center;
}
.pdegamuis-kacenumaqin > div {
width: 1rem;
height: 1rem;
margin: 3rem 0.2rem;
background: #8385aa;
border-radius: 50%;
animation: pdegamuis-kacenumaqin 0.6s infinite alternate;
}
.pdegamuis-kacenumaqin > div:nth-child(2) {
animation-delay: 0.2s;
}
.pdegamuis-kacenumaqin > div:nth-child(3) {
animation-delay: 0.4s;
}
Примечание: 1remобычно 16px.
- @keyframes определяет анимацию, которая имеет два состояния, где элемент изменяется opacity и переводится на 2D-плоскость с помощью transform: translate3d(). Использование одноосной трансляции transform: translate3d()повышает производительность анимации.
- .bouncing-loader является родительским контейнером прыгающих кругов и использует display: flexи justify-content: center расположить их в центре.
- .bouncing-loader > div предназначается для трех дочерних div элементов родительского стиля, который будет стилизован. В div дает ширину и высоту 1rem, используя border-radius: 50% чтобы превратить их из квадратов кругов.
- margin: 3rem 0.2rem указывает, что у каждого круга есть верхний, нижний край 3remи левый, правый край, 0.2rem чтобы они не касались друг друга, давая им некоторое пространство для дыхания.
- animation свойство является обобщающим для различных свойств анимации: animation-name, animation-duration, animation-iteration-count, animation-direction используется.
- nth-child(n) предназначается для элемента, который является дочерним элементом его родителя.
- animation-delay используется для второго и третьего div соответственно, чтобы каждый элемент не запускал анимацию одновременно.
Демонстрация
