← Каталог
UI-паттерны из Uiverse (Galaxy) — Спиннер с доступностью
Фрагмент из «UI-паттерны из Uiverse (Galaxy)»: Спиннер с доступностью.
<div class="loader" role="progressbar" aria-busy="true" aria-label="Загрузка">
<span></span><span></span><span></span>
</div>
<style>
.loader {
display: flex;
gap: 0.35rem;
padding: 1rem;
}
.loader span {
width: 0.65rem;
height: 0.65rem;
border-radius: 50%;
background: var(--color-primary, #7b68ee);
animation: bounce 0.6s ease-in-out infinite;
}
.loader span:nth-child(2) { animation-delay: 0.1s; }
.loader span:nth-child(3) { animation-delay: 0.2s; }
@keyframes bounce {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
40% { transform: scale(1); opacity: 1; }
}
</style> <div class="loader" role="progressbar" aria-busy="true" aria-label="Загрузка">
<span></span><span></span><span></span>
</div>
<style>
.loader {
display: flex;
gap: 0.35rem;
padding: 1rem;
}
.loader span {
width: 0.65rem;
height: 0.65rem;
border-radius: 50%;
background: var(--color-primary, #7b68ee);
animation: bounce 0.6s ease-in-out infinite;
}
.loader span:nth-child(2) { animation-delay: 0.1s; }
.loader span:nth-child(3) { animation-delay: 0.2s; }
@keyframes bounce {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
40% { transform: scale(1); opacity: 1; }
}
</style>