primitives

Spinner

Spinner — базовый примитив RevueUI (Reka UI + shadcn-совместимый API).

Загрузка превью…

src/ui/spinner/Spinner.vue

<!--
  Оригинал рендерит `IconPlaceholder` (dev-обвязка сайта ReUI). Здесь и в
  кейсе используется один и тот же инлайновый `<svg>` (путь lucide
  "loader-circle" — на нём построен и `Loader2Icon`), чтобы диф сравнивал
  сам компонент, а не выбор библиотеки иконок.
-->
<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

const props = defineProps<{
  /** Доп. классы. Имя `class` — соглашение shadcn-vue (не `className`). */
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <svg
    data-slot="spinner"
    role="status"
    aria-label="Loading"
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    :class="cn('size-4 animate-spin', props.class)"
  ><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
</template>

src/ui/spinner/index.ts

export { default as Spinner } from "./Spinner.vue"

Установка

npx shadcn-vue@latest add https://revueui.rootapi.dev/r/spinner.json

Зависимости реестра

Источник: порт из ReUI (Keenthemes, MIT)