Pulse Loader

Лоадер из трёх пульсирующих точек с градиентом — чистый CSS, ноль зависимостей.

cssautobasic~1 КБreduced-motion ✓

↗

Установка

npx shadcn@latest add https://motiva.pages.dev/r/pulse-loader.json

Что нужно в проекте до установки

components.json в корне — с алиасами в форме"components": "@/components". Нет файла — CLI не поймёт, куда класть.
Алиас @ объявлен дважды: "paths": {"@/*": ["./src/*"]} в корневом tsconfig.json (в Vite он часто содержит только references — тогда CLI создаёт папку@) и resolve.alias в конфиге сборщика.
Токены подключены один раз на приложение:import "@/styles/motiva-tokens.css" — они приезжают вместе с записью. Без них секция потеряет цвета, ритм и тему.
Своя типографика не должна спорить: если у вас на обёрткеtext-align: center, он протечёт внутрь блоков.
Проект без TypeScript? Всё равно нужен минимальныйtsconfig.json с pathsи "tsx": true в components.json: CLI грузит tsconfig безусловно, а с "tsx": false идёт за jsconfig.json и падает так же. Приехавший рядом.tsx можно не трогать — вам нужен.vanilla.js.

Экспорт

↓ Скачать .zip

Код

.pl {
  display: inline-flex;
  gap: 12px;
}

.pl span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(0.62 0.19 280), oklch(0.72 0.15 220));
  animation: pl-bounce 1.1s ease-in-out infinite;
}
.pl span:nth-child(2) {
  animation-delay: 0.15s;
}
.pl span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes pl-bounce {
  0%,
  80%,
  100% {
    transform: scale(0.4);
    opacity: 0.35;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pl span {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

import "./pulse-loader.css";

/** Лоадер из трёх пульсирующих точек (чистый CSS). Замирает при reduced-motion. */
export function PulseLoader() {
  return (
    <div className="pl" role="status" aria-label="Загрузка">
      <span />
      <span />
      <span />
    </div>
  );
}

Pulse Loader

Установка

Экспорт

Код

Похожие эффекты