Домой / Рецепты CSS / Спиннер/загрузчик на чистом CSS
Спиннер/загрузчик на чистом CSS

Спиннер/загрузчик на чистом CSS

Реализован загрузчик на чистом CSS коде.

Оригинальный и достаточно необычный загрузчик поможет вам украсить любую из ваших разработок.

Демо

HTML

<div class="loader"></div>

CSS


.loader {
position: relative;
width: 2.5em;
height: 2.5em;
transform: rotate(165deg);
}
.loader:before, .loader:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 0.5em;
height: 0.5em;
border-radius: 0.25em;
transform: translate(-50%, -50%);
}
.loader:before {
animation: before 2s infinite;
}
.loader:after {
animation: after 2s infinite;
}

@keyframes before {
0% {
width: 0.5em;
box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
}

35% {
width: 2.5em;
box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
}

70% {
width: 0.5em;
box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
}

100% {
box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
}
}
@keyframes after {
0% {
height: 0.5em;
box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
}

35% {
height: 2.5em;
box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
}

70% {
height: 0.5em;
box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
}

100% {
box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
}
}
/**
* Attempt to center the whole thing!
*/
html,
body {
height: 100%;
}

.loader {
position: absolute;
top: calc(50% - 1.25em);
left: calc(50% - 1.25em);
}

Реализован загрузчик на чистом CSS коде. Оригинальный и достаточно необычный загрузчик поможет вам украсить любую из ваших разработок. HTML CSS .loader { position: relative; width: 2.5em; height: 2.5em; transform: rotate(165deg); } .loader:before, .loader:after { content: ''; position: absolute; top: 50%; left: 50%; display: block; width: 0.5em; height: 0.5em; border-radius: 0.25em; transform: translate(-50%, -50%); } .loader:before { animation: before 2s infinite; } .loader:after { animation: after 2s infinite; } @keyframes before { 0% { width: 0.5em; box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75); } 35%&hellip;

Обзор

Проголосуйте за статью

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 3.74 ( 4 голосов )
85

Оставить комментарий

Ваш email не будет опубликован.

*