SVG прелоадер на чистом CSS

Конечный результат работы прелоадера

Процесс создания прелоадера

В этом посте создадим анимированный 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. Но Вы также можете скачать готовый код здесь.