Gradient Spinner
Кольцевой спиннер загрузки с conic-градиентом — чистый CSS, маска вырезает центр.
Установка
npx shadcn@latest add https://motiva.pages.dev/r/gradient-spinner.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.
Экспорт
Код
.gsp {
width: 46px;
height: 46px;
border-radius: 50%;
background: conic-gradient(from 0deg, transparent 0%, oklch(0.62 0.19 280) 50%, oklch(0.72 0.15 220) 100%);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
animation: gsp-spin 0.9s linear infinite;
}
@keyframes gsp-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.gsp {
animation-duration: 3s;
}
}
import "./gradient-spinner.css";
/** Кольцевой спиннер с conic-градиентом (чистый CSS, mask вырезает центр). */
export function GradientSpinner() {
return <div className="gsp" role="status" aria-label="Загрузка" />;
}
