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


    Получайте полезную информацию
    на Вашу почту еженедельно

    Ваш Email не будет передан третьим лицам