Простой загрузчик — пошаговое руководство

HTML

Для HTML у нас будет только один элемент div с классом «loader».

<div class="loader"></div>

CSS

Мы просто установим ширину и высоту по желанию, с радиусом границы 50%. Затем добавим сплошную границу 10px. С помощью свойства border-color мы установим верхний и нижний цвет на #000 (черный), а левый и правый на прозрачный.

.loader {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 10px solid #000;
    border-color: #000 transparent;
}

Теперь создадим анимацию под названием «rotation». Просто установим свойство transform для поворота на 0 градусов на 0% и на 360 градусов на 100%.

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

А теперь просто добавим свойство animation на элемент loader. Мы установим длительность 1 секунда, бесконечность и линейность.

.loader {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 10px solid #000;
    border-color: #000 transparent #000 transparent;
    animation: rotation 1s linear infinite; <!--  Animation  -->
}

Видеоурок

Весь код с видеоуроком вы можете найти здесь.

Спасибо, что прочитали эту статью. ❤️