Skip to content
Paramanu v0.1.0-alpha.0

Spinner

Spinner displays an animated loading indicator with a visually hidden “Loading” label for accessibility.

Basic Usage

import { Spinner } from "@paramanu/feedback-react"


export default function App() {
return <Spinner />
}
<div class="pm-spinner pm-spinner--md pm-spinner--primary" role="status">
<span class="sr-only">Loading</span>
</div>

Sizes

import { Spinner } from "@paramanu/feedback-react"


export default function App() {
return (
  <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
    <Spinner size="xs" />
    <Spinner size="sm" />
    <Spinner size="md" />
    <Spinner size="lg" />
    <Spinner size="xl" />
  </div>
)
}
<div style="display: flex; gap: 16px; align-items: center;">
<div class="pm-spinner pm-spinner--xs pm-spinner--primary" role="status"></div>
<div class="pm-spinner pm-spinner--sm pm-spinner--primary" role="status"></div>
<div class="pm-spinner pm-spinner--md pm-spinner--primary" role="status"></div>
<div class="pm-spinner pm-spinner--lg pm-spinner--primary" role="status"></div>
<div class="pm-spinner pm-spinner--xl pm-spinner--primary" role="status"></div>
</div>