Gradient Spinner

Кольцевой спиннер загрузки с conic-градиентом — чистый CSS, маска вырезает центр.

cssautobasic~1 КБreduced-motion ✓

↗

Установка

npx shadcn@latest add https://motiva.pages.dev/r/gradient-spinner.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

Код

.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="Загрузка" />;
}

Gradient Spinner

Установка

Экспорт

Код

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