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

Индикатор загрузки

Реализация индикатора загрузки на чистом CSS с анимацией раскрывающегося цветка.

Демо

HTML

<div class="loading">
 <div class="dot"></div>
 <div class="dot2"></div>
</div>

CSS

body {
 background: #e74c3c;
 color: white;
}

.loading {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 20px;
 height: 20px;
 transform: translate(-50%, -50%);
}
.loading .dot {
 position: absolute;
 border-radius: 50%;
 left: 1px;
 top: 1px;
 width: 18px;
 height: 18px;
 background: white;
 animation: spin 2.5s 0s infinite both;
}
.loading .dot2 {
 position: absolute;
 border-radius: 50%;
 width: 20px;
 height: 20px;
 background: white;
 animation: spin2 2.5s 0s infinite both;
}

@keyframes spin {
 0%, 100% {
 box-shadow: 0 0 0 white, 0 0 0 white, 0 0 0 white, 0 0 0 white, 0 0 0 white, 0 0 0 white, 0 0 0 white, 0 0 0 white;
 }

 50% {
 transform: rotate(180deg);
 }

 25%, 75% {
 box-shadow: 28px 0 0 white, -28px 0 0 white, 0 28px 0 white, 0 -28px 0 white, 20px -20px 0 white, 20px 20px 0 white, -20px -20px 0 white, -20px 20px 0 white;
 }

 100% {
 transform: rotate(360deg);
 box-shadow: 0 0 0 white, 0 0 0 white, 0 0 0 white, 0 0 0 white, 0 0 0 white, 0 0 0 white, 0 0 0 white, 0 0 0 white;
 }
}
@keyframes spin2 {
 0%, 100% {
 box-shadow: 0 0 0 white, 0 0 0 white, 0 0 0 white, 0 0 0 white, 0 0 0 white, 0 0 0 white, 0 0 0 white, 0 0 0 white;
 }

 50% {
 transform: rotate(-180deg);
 }

 25%, 75% {
 box-shadow: 52px 0 0 white, -52px 0 0 white, 0 52px 0 white, 0 -52px 0 white, 38px -38px 0 white, 38px 38px 0 white, -38px -38px 0 white, -38px 38px 0 white;
 background: transparent;
 }

 100% {
 transform: rotate(-360deg);
 box-shadow: 0 0 0 white, 0 0 0 white, 0 0 0 white, 0 0 0 white, 0 0 0 white, 0 0 0 white, 0 0 0 white, 0 0 0 white;
 }
}

Реализация индикатора загрузки на чистом CSS с анимацией раскрывающегося цветка. HTML CSS body { background: #e74c3c; color: white; } .loading { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); } .loading .dot { position: absolute; border-radius: 50%; left: 1px; top: 1px; width: 18px; height: 18px; background: white; animation: spin 2.5s 0s infinite both; } .loading .dot2 { position: absolute; border-radius: 50%; width: 20px; height: 20px; background: white; animation: spin2 2.5s 0s infinite both; } @keyframes spin { 0%, 100% { box-shadow:&hellip;

Обзор

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

Оценка

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

Рейтинг: Вы можете быть первым !
85

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

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

*