Pulse Loader
Лоадер из трёх пульсирующих точек с градиентом — чистый CSS, ноль зависимостей.
Установка
npx shadcn@latest add https://motiva.pages.dev/r/pulse-loader.jsonЧто нужно в проекте до установки
Файл
components.jsonв корнеИз него CLI узнаёт, куда класть файлы. Алиасы — в такой форме:
"aliases": { "components": "@/components", "lib": "@/lib" }Нет файла — установка не начнётся вовсе.
Алиас
@объявлен дваждыВ корневом
tsconfig.jsonи в конфиге сборщика. В Vite корневой tsconfig часто содержит толькоreferences— этого мало."paths": { "@/*": ["./src/*"] } // tsconfig.json resolve.alias = { "@": "/src" } // vite.config.tsБез
pathsCLI молча создаёт папку с именем@.Токены подключены один раз на приложение
Они приезжают вместе с записью — достаточно импортировать их в точке входа:
import "@/styles/motiva-tokens.css";Без них блок потеряет цвета, ритм и тему.
Своя типографика не спорит с блоком
Наследуемые свойства протекают внутрь:
text-align: centerна обёртке отцентрует содержимое секции. То же касаетсяfont-familyиline-height.Проект без TypeScript? всё равно нужен tsconfig
CLI грузит
tsconfig.jsonбезусловно, а при"tsx": falseидёт заjsconfig.jsonи падает так же. Минимум — файл сpathsи"tsx": trueвcomponents.json.Приехавший рядом
.tsxможно не трогать — вам нужен.vanilla.js.
Экспорт
Код
.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>
);
}
