Конечный результат работы прелоадера
Процесс создания прелоадера
В этом посте создадим анимированный SVG прелоадер на чистом CSS. Для этого, в первую очередь, нам нужно создать SVG с четырьмя окружностями. Радиус самой большой окружности будет равен 135px, а каждая следующая окружность будет уменьшаться на 25px. С цифрами, естественно, можно поиграться.
Шаг 1. Разметка HTML
Шаг 2. Стили CSS
Здесь мы управляем обводкой в SVG. Сами окружности не заполнятся через свойство fill, а задаются контуры, в нашем случае размером в 4,5px. Заменяем сплошные контуры на штриховые, с использованием свойства stroke-dasharray. Ширина пунктирных линий в самой большой окружности начинается с 550px, а ширина линий для меньших окружностей постепенно уменьшается на 50px;
Ну и наконец остается только настроить саму анимацию. Тут все просто: вращаем наши окружности на 360 градусов в бесконечном цикле.
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #f6f7d7;
}
.loader {
max-width: 15rem;
width: 100%;
height: auto;
stroke-linecap: round;
}
circle {
fill: none;
stroke-width: 4.5;
animation-name: preloader;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
transform-origin: 170px 170px;
will-change: transform;
}
circle:nth-of-type(1) {
stroke-dasharray: 550px;
}
circle:nth-of-type(2) {
stroke-dasharray: 500px;
}
circle:nth-of-type(3) {
stroke-dasharray: 450px;
}
circle:nth-of-type(4) {
stroke-dasharray: 300px;
}
circle:nth-of-type(1) {
animation-delay: -0.15s;
}
circle:nth-of-type(2) {
animation-delay: -0.3s;
}
circle:nth-of-type(3) {
animation-delay: -0.45s;
}
circle:nth-of-type(4) {
animation-delay: -0.6s;
}
@keyframes preloader {
50% {
transform: rotate(360deg); }
}
Чтобы заработал прелоадер достаточно скопировать код css и html. Но Вы также можете скачать готовый код здесь.