{"name":"spinner","title":"Spinner","description":"An indicator that can be used to show a loading state.","installCommand":"bunx marko-ui add spinner -y","usageTags":"<Spinner>","importSnippet":"import Spinner from \"@/components/ui/spinner/spinner.marko\";","usageSnippet":"<Spinner/>","tags":["Spinner"],"parts":[],"props":[],"events":[],"keyboard":[],"accessibilityNotes":["Spinner renders `role=\"status\"` and a fixed `aria-label=\"Loading\"` on the root `<svg>` so assistive technology announces the loading state without extra markup.","The `animate-spin` motion is purely decorative — screen readers rely on the `status` role and label, not the animation, so the loading state is still communicated if motion is reduced or disabled.","When pairing a spinner with visible text (see the \"With text\" and \"Button\" examples), the text is redundant with `aria-label=\"Loading\"` for screen reader users but still valuable for sighted users — this is the same tradeoff upstream ships and is not a deviation."],"examples":[{"id":"spinner-demo","title":"Basic","source":"import Spinner from \"@marko-ui/shadcn/ui/spinner/spinner.marko\";\n\n<div class=\"flex flex-col items-center justify-center gap-8\">\n  <Spinner/>\n</div>","description":"A spinner with the default size and color."},{"id":"spinner-custom","title":"Customization","source":"import Spinner from \"@marko-ui/shadcn/ui/spinner/spinner.marko\";\n\n<div class=\"flex items-center gap-4\">\n  <Spinner/>\n</div>","description":"Spinner is a single-file component: swap its icon or markup by editing `spinner.marko` directly rather than passing a prop."},{"id":"spinner-size","title":"Size","source":"import Spinner from \"@marko-ui/shadcn/ui/spinner/spinner.marko\";\n\n<div class=\"flex items-center gap-4\">\n  <Spinner class=\"size-3\"/>\n  <Spinner/>\n  <Spinner class=\"size-6\"/>\n  <Spinner class=\"size-8\"/>\n</div>","description":"Use the `size-*` utility class to change the size of the spinner."},{"id":"spinner-color","title":"Color","source":"import Spinner from \"@marko-ui/shadcn/ui/spinner/spinner.marko\";\n\n<div class=\"flex items-center gap-6\">\n  <Spinner class=\"size-6 text-red-500\"/>\n  <Spinner class=\"size-6 text-green-500\"/>\n  <Spinner class=\"size-6 text-blue-500\"/>\n  <Spinner class=\"size-6 text-yellow-500\"/>\n  <Spinner class=\"size-6 text-purple-500\"/>\n</div>","description":"The spinner inherits `currentColor`, so any text color utility changes it."},{"id":"spinner-text","title":"With text","source":"import Spinner from \"@marko-ui/shadcn/ui/spinner/spinner.marko\";\n\n<div class=\"flex items-center gap-2 text-sm text-muted-foreground\">\n  <Spinner/>\n  Loading...\n</div>","description":"Pair a spinner with a label to describe what is loading."},{"id":"spinner-button","title":"Button","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Spinner from \"@marko-ui/shadcn/ui/spinner/spinner.marko\";\n\n<div class=\"flex flex-col items-center gap-4\">\n  <Button type=\"button\" disabled size=\"sm\">\n    <Spinner/>\n    Loading...\n  </Button>\n  <Button type=\"button\" variant=\"outline\" disabled size=\"sm\">\n    <Spinner/>\n    Please wait\n  </Button>\n  <Button type=\"button\" variant=\"secondary\" disabled size=\"sm\">\n    <Spinner/>\n    Processing\n  </Button>\n</div>","description":"Place a spinner before a button's label to show a loading state."},{"id":"spinner-badge","title":"Badge","source":"import Badge from \"@marko-ui/shadcn/ui/badge/badge.marko\";\nimport Spinner from \"@marko-ui/shadcn/ui/spinner/spinner.marko\";\n\n<div class=\"flex items-center gap-4\">\n  <Badge>\n    <Spinner/>\n    Syncing\n  </Badge>\n  <Badge variant=\"secondary\">\n    <Spinner/>\n    Updating\n  </Badge>\n  <Badge variant=\"outline\">\n    <Spinner/>\n    Processing\n  </Badge>\n</div>","description":"Place a spinner before a badge's label to show a loading state."},{"id":"spinner-input-group","title":"Input Group","source":"import InputGroup from \"@marko-ui/shadcn/ui/input-group/input-group.marko\";\nimport InputGroupInput from \"@marko-ui/shadcn/ui/input-group/input.marko\";\nimport InputGroupAddon from \"@marko-ui/shadcn/ui/input-group/addon.marko\";\nimport InputGroupButton from \"@marko-ui/shadcn/ui/input-group/button.marko\";\nimport InputGroupTextarea from \"@marko-ui/shadcn/ui/input-group/textarea.marko\";\nimport Spinner from \"@marko-ui/shadcn/ui/spinner/spinner.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<div class=\"flex w-full max-w-md flex-col gap-4\">\n  <InputGroup>\n    <InputGroupInput placeholder=\"Send a message...\" disabled/>\n    <InputGroupAddon align=\"inline-end\">\n      <Spinner/>\n    </InputGroupAddon>\n  </InputGroup>\n  <InputGroup>\n    <InputGroupTextarea placeholder=\"Send a message...\" disabled/>\n    <InputGroupAddon align=\"block-end\">\n      <Spinner/>\n      Validating...\n      <InputGroupButton class=\"ml-auto\" variant=\"default\">\n        <Icon name=\"ArrowUpIcon\"/>\n        <span class=\"sr-only\">Send</span>\n      </InputGroupButton>\n    </InputGroupAddon>\n  </InputGroup>\n</div>","description":"Show a loading state inside an input group's addon."},{"id":"spinner-empty","title":"Empty","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Empty from \"@marko-ui/shadcn/ui/empty/empty.marko\";\nimport EmptyContent from \"@marko-ui/shadcn/ui/empty/content.marko\";\nimport EmptyDescription from \"@marko-ui/shadcn/ui/empty/description.marko\";\nimport EmptyHeader from \"@marko-ui/shadcn/ui/empty/header.marko\";\nimport EmptyMedia from \"@marko-ui/shadcn/ui/empty/media.marko\";\nimport EmptyTitle from \"@marko-ui/shadcn/ui/empty/title.marko\";\nimport Spinner from \"@marko-ui/shadcn/ui/spinner/spinner.marko\";\n\n<Empty class=\"w-full\">\n  <EmptyHeader>\n    <EmptyMedia variant=\"icon\">\n      <Spinner/>\n    </EmptyMedia>\n    <EmptyTitle>Processing your request</EmptyTitle>\n    <EmptyDescription>\n      Please wait while we process your request. Do not refresh the page.\n    </EmptyDescription>\n  </EmptyHeader>\n  <EmptyContent>\n    <Button type=\"button\" variant=\"outline\" size=\"sm\">Cancel</Button>\n  </EmptyContent>\n</Empty>","description":"Use a spinner in an `Empty` state to indicate a request is in progress."},{"id":"spinner-rtl","title":"RTL","source":"import Item from \"@marko-ui/shadcn/ui/item/item.marko\";\nimport ItemContent from \"@marko-ui/shadcn/ui/item/content.marko\";\nimport ItemMedia from \"@marko-ui/shadcn/ui/item/media.marko\";\nimport ItemTitle from \"@marko-ui/shadcn/ui/item/title.marko\";\nimport Spinner from \"@marko-ui/shadcn/ui/spinner/spinner.marko\";\n\n<div class=\"flex w-full max-w-xs flex-col gap-4 [--radius:1rem]\" dir=\"rtl\">\n  <Item variant=\"muted\" dir=\"rtl\">\n    <ItemMedia>\n      <Spinner/>\n    </ItemMedia>\n    <ItemContent>\n      <ItemTitle class=\"line-clamp-1\">جاري معالجة الدفع...</ItemTitle>\n    </ItemContent>\n    <ItemContent class=\"flex-none justify-end\">\n      <span class=\"text-sm tabular-nums\">١٠٠.٠٠ دولار</span>\n    </ItemContent>\n  </Item>\n</div>","description":"Spinner and its parts restyle correctly for right-to-left layouts via `dir=\"rtl\"`."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"svg"}