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

Демо

1,24 КБ
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-top: 4px solid #07d;
    border-right: 4px solid transparent;
    -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

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

Сначала у нас есть немного HTML с элементом <div>, помеченным как «spinner». Это словно мы нарисовали на нашей веб-странице маленький, невидимый квадратик, в котором будет жить наш спиннер.

Теперь, к магии переходим в CSS. CSS — это как гардероб для нашей веб-страницы; он решает, как все будет выглядеть. Здесь мы определили анимации ключевых кадров с названием spinner. Ключевые кадры в CSS — это как контрольные точки в гонке; они говорят браузеру, что делать в определенные моменты. Для нашего спиннера у нас простая цель: повернуться на полные 360 градусов. Именно это и создает эффект вращения.

Мы включили эту команду вращения для разных браузеров, потому что не все браузеры говорят на одном языке. Вот почему вы видите префиксы -webkit, -moz, и -o. Это как сказать «вращайся» на английском, французском и немецком, чтобы все браузеры поняли

Часть .spinner:before — это место, где мы дизайним наш спиннер. Мы делаем его идеальным кругом с границей, но только верхняя часть границы окрашена, что делает его похожим на пирог с одним отличающимся по цвету кусочком. Это расположено прямо в центре нашего невидимого квадратика.

Наконец, мы заставляем этот круг вращаться, используя свойство animation, связывая его с определенными нами ключевыми кадрами spinner. Часть 0.6s linear infinite означает, что спиннер будет вращаться плавно и делать это бесконечно, занимая 0.6 секунды для полного оборота.

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