CSS Лоадер №5 - пример кода

Демо

1,28 КБ
HTML, CSS
Лоадер
спиннер
Лицензия MIT

Код
Редактор

HTML

<div class="spinner"></div>

CSS

@-webkit-keyframes spinner {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-moz-keyframes spinner {
    to {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-o-keyframes spinner {
    to {
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spinner {
    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.spinner:before {
    content: "";
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4rem;
    height: 4rem;
    margin-top: -2rem;
    margin-left: -2rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 0.3rem solid #f6f;
    border-top-color: #0e0;
    border-right-color: #0dd;
    border-bottom-color: #f90;
    -webkit-animation: spinner 0.6s linear infinite;
    -moz-animation: spinner 0.6s linear infinite;
    -o-animation: spinner 0.6s linear infinite;
    animation: spinner 0.6s linear infinite;
}

HTML
CSS

Представьте себе: вы заходите на сайт, ожидаете загрузки страницы или начала видео, и вдруг замечаете маленький кружок, вращающийся перед вами. Именно такой вращающийся индикатор загрузки мы сегодня и рассмотрим! Это изящный визуальный сигнал, который как бы говорит: «Что-то происходит, подождите немного!» Давайте шаг за шагом разберемся, как этот волшебный кружок оживает на вашем экране.

Во-первых, у нас есть простая строка <div class="spinner"></div>, своеобразный цифровой зародыш, из которого наш индикатор будет расти. Это HTML, каркас веб-страниц, который отмечает место для нашего загрузчика с помощью класса spinner. Это словно мы говорим: «Здесь будет действие!»

Затем мы погружаемся в мир CSS, который задает стиль вебу, где определяется, как все выглядит. Здесь нас встречает серия @keyframes с именем spinner, которая задает хореографию для нашего индикатора, указывая на полное вращение на 360 градусов. Это как приказать танцору сделать полный оборот, но для нашего индикатора, чтобы он выглядел одинаково в начале и конце своего танца.

Но как заставить наш индикатор начать танцевать? Все дело в стиле класса spinner, точнее его псевдоэлемента before. Мы задаем ему размеры, размещаем его точно по центру и стилизуем под вид круга с границами, окрашенными по-разному с каждой стороны. Это словно мы одеваем нашего танцора в яркий костюм, чтобы было четко видно его вращение.

Настоящая магия происходит, когда мы применяем анимацию. Связывая нашу хореографию spinner с продолжительностью и бесконечным циклом, мы запускаем наш круг в вечное движение. Благодаря свойствам анимации, которые оживляют наш CSS-наряд, индикатор загрузки превращается в завораживающее зрелище, выполняя свою функцию – информировать пользователей о том, что их запрос обрабатывается.

Вот и все, перед вами – вращающийся индикатор загрузки, который не только выглядит круто, но и играет ключевую роль в пользовательском опыте, достигнутый благодаря нескольким умным строкам HTML и CSS. Это маленький, но могучий герой веб-мира, держащий пользователей в курсе и развлекая их, один оборот за раз.