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

Демо

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

Код
Редактор

HTML

<div class="spinner-1">Загрузка...</div>

CSS

:root {
    --backgroundColor: #161a22;
    --color: #fff;
}

.spinner-1,
.spinner-1:before,
.spinner-1:after {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.spinner-1 {
    color: var(--color);
    text-indent: -99999em;
    margin: auto;
    position: relative;
    width: 10rem;
    height: 10rem;
    -webkit-box-shadow: inset 0 0 0 1em;
    -moz-box-shadow: inset 0 0 0 1em;
    box-shadow: inset 0 0 0 1em;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
}

.spinner-1:before,
.spinner-1:after {
    position: absolute;
    content: "";
}

.spinner-1:before {
    width: 5.2em;
    height: 10.2em;
    background: var(--backgroundColor);
    -webkit-border-radius: 10.2em 0 0 10.2em;
    -moz-border-radius: 10.2em 0 0 10.2em;
    border-radius: 10.2em 0 0 10.2em;
    top: -0.1em;
    left: -0.1em;
    -webkit-transform-origin: 5.1em 5.1em;
    -moz-transform-origin: 5.1em 5.1em;
    -o-transform-origin: 5.1em 5.1em;
    transform-origin: 5.1em 5.1em;
    -webkit-animation: load2 2s infinite ease 1.5s;
    -moz-animation: load2 2s infinite ease 1.5s;
    -o-animation: load2 2s infinite ease 1.5s;
    animation: load2 2s infinite ease 1.5s;
}

.spinner-1:after {
    width: 5.2em;
    height: 10.2em;
    background: var(--backgroundColor);
    -webkit-border-radius: 0 10.2em 10.2em 0;
    -moz-border-radius: 0 10.2em 10.2em 0;
    border-radius: 0 10.2em 10.2em 0;
    top: -0.1em;
    left: 4.9em;
    -webkit-transform-origin: 0.1em 5.1em;
    -moz-transform-origin: 0.1em 5.1em;
    -o-transform-origin: 0.1em 5.1em;
    transform-origin: 0.1em 5.1em;
    -webkit-animation: load2 2s infinite ease;
    -moz-animation: load2 2s infinite ease;
    -o-animation: load2 2s infinite ease;
    animation: load2 2s infinite ease;
}

@-webkit-keyframes load2 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes load2 {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes load2 {
    0% {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load2 {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

HTML
CSS

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

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

Магия этого вращающегося зрелища заключается в анимациях и трансформациях CSS. CSS, или каскадные таблицы стилей, — это инструмент, который веб-разработчики используют для стилизации веб-сайтов. В данном случае он используется для того, чтобы заставить половинки индикатора вращаться вокруг их центра. Это достигается с помощью ключевых кадров, которые служат ориентирами в пути анимации, указывая браузеру, как перейти от точки А (без вращения) к точке Б (полное вращение).

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

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