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

Демо

1,23 КБ
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: 3rem;
    height: 3rem;
    margin-top: -1.5rem;
    margin-left: -1.5rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 4px solid #ccc;
    border-top-color: rgb(22, 26, 34);
    -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

Представьте, что вы сидите за компьютером, просматриваете сайт и замечаете маленький кружок, вращающийся вокруг, сигнализирующий о загрузке страницы. Вот именно об этом и говорит представленный код – создании этого вращающегося кружка, часто называемого спиннером, который является знакомым элементом в интернете.

Код начинается с простого HTML-элемента, div, который специально предназначен для нашего спиннера. Этот div сам по себе мало что делает; это просто место, которое преобразуется во что-то визуально привлекательное с помощью волшебства CSS.

Далее мы переходим к сути действия с помощью стилей CSS. Раздел стилей начинается с определения анимаций для спиннера. Эти анимации – это та самая магия, которая заставляет наш спиннер вращаться на 360 градусов, придавая ему знакомый эффект вращения. Код тщательно обеспечивает совместимость с различными веб-браузерами, используя префиксы вроде -webkit-, -moz-, и -o- перед свойствами анимации. Это как говорить на нескольких языках, чтобы каждый понял вас, независимо от используемого браузера.

Далее настраиваются визуальные аспекты нашего спиннера. Мы делаем его идеальным кругом с помощью border-radius: 50%, задаем ему твердую границу с другим цветом сверху, чтобы подчеркнуть движение вращения, и используем абсолютное позиционирование, чтобы центрировать его на экране. Размеры, стили границ и даже скорость анимации тщательно подобраны, чтобы спиннер был заметным, но не слишком отвлекающим.

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

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