Пользовательский интерфейс, который объединяет анимацию и Color, что обеспечивают цветную анимацию, а также множество функций утилиты для работы с цветами. Все очень просто, как по настройке, так и по установке, ведь все работает на чистом стиле CSS. Здесь не используют изображения, просто фантазии CSS3. Как всегда, хороший маленький дизайнер, они возвращаются к вполне приемлемому опыту. Хотя мы можем создавать автономные и статические индикаторы выполнения, используя только собственные HTML5 и CSS3, мы можем усилить эффекты.
Один из таких типов элементов, где обычно используется в среде, для сайтов и платформ, которые должны иметь дело с модулями ценообразования, с отображением прогресса таких вещей, как достижения навыков и многое другое.
HTML
Код
<div class="animated_progres">
<div class="koprovides_animations"></div>
<div class="koprovides_animations"></div>
<div class="koprovides_animations"></div>
<div class="koprovides_animations"></div>
</div>
CSS
Код
.animated_progres {
position: absolute;
top: 47%;
left: 47%;
}
.koprovides_animations {
display: inline-block;
width: 4px;
height: 19px;
border-radius: 5px;
animation: loading 1s ease-in-out infinite;
}
.koprovides_animations:nth-child(1) {
background-color: #2477af;
animation-delay: 0;
}
.koprovides_animations:nth-child(2) {
background-color: #ad2a1c;
animation-delay: 0.09s;
}
.koprovides_animations:nth-child(3) {
background-color: #b79611;
animation-delay: .18s;
}
.koprovides_animations:nth-child(4) {
background-color: #1a8647;
animation-delay: .28s;
}
@keyframes loading {
0% {
transform: scale(1);
}
20% {
transform: scale(1, 2.2);
}
40% {
transform: scale(1);
}
}
Палитру цвета, здесь вы можете самостоятельно сменить под свой дизайн.
Демонстрация
