htsx

Spinner

Spinner component for Hono JSX

Examples

// Default
<Spinner />
 
// Color
<Spinner class="text-primary" />
 
// Size
<Spinner class="size-6" />
 
// Loading...
<Button type="submit" disabled>
  <Spinner />
</Button>

Code

ui/spinner.tsx
import type { JSX } from "hono/jsx";
import { c } from "./c";
 
export function Spinner({ class: custom, ...props }: JSX.IntrinsicElements["span"]) {
  return (
    <span
      class={c("inline-block size-5 animate-spin rounded-full border border-t-transparent", custom)}
      aria-hidden="true"
      {...props}
    />
  );
}