Код IT
← Каталог

UI-паттерны из Uiverse (Galaxy) — Спиннер с доступностью

Фрагмент из «UI-паттерны из Uiverse (Galaxy)»: Спиннер с доступностью.

HTML main.html
<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>