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

Демо

1,25 КБ
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: 4px solid transparent;
    border-top-color: #07d;
    border-bottom-color: #07d;
    -webkit-animation: spinner 0.8s ease infinite;
    -moz-animation: spinner 0.8s ease infinite;
    -o-animation: spinner 0.8s ease infinite;
    animation: spinner 0.8s ease infinite;
}

HTML
CSS

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

В этом примере идеально сочетаются HTML и CSS. Начинается все с простого HTML-тега <div class="spinner"></div>, который служит сценой для нашего спиннера. Это место, где спиннер будет исполнять свой танец.

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

Но это не просто вращение; оно плавное и непрерывное благодаря свойству animation, примененному к .spinner:before. Эта часть — подготовка к шоу: устанавливаем размер, позицию, одеваем спиннер в цвета и, наконец, заставляем его вращаться с определенной скоростью и стилем 0.8s ease infinite. Ease делает вращение медленным в начале и конце, а infinite означает, что спиннер будет танцевать, пока контент полностью не загрузится.

Использование префиксов для разных браузеров (типа -webkit, -moz, -o) — это как говорить на разных языках, чтобы убедиться, что все браузеры понимают инструкции и отображают спиннер гладко.

И вот оно, вращающееся ожидание, которое развлекает вашу аудиторию, пока они ждут. Это небольшое прикосновение, но оно делает пребывание на сайте более полированным и привлекательным.