@mshafiqyajid/react-spinner
Headless spinner hook and styled component. Five variants (spin/dots/bars/pulse/ring), six tones, five sizes, speed control, overlay mode, and reduced-motion support.
Playground #
Loadingspin
Loadingdots
Loadingbars
Loadingpulse
Loadingring
Loading
Props
TSX
import { SpinnerStyled } from "@mshafiqyajid/react-spinner/styled";
import "@mshafiqyajid/react-spinner/styles.css";
<SpinnerStyled
label="Loading"
/>Install #
npm install @mshafiqyajid/react-spinnerQuick start #
import { SpinnerStyled } from "@mshafiqyajid/react-spinner/styled";
import "@mshafiqyajid/react-spinner/styles.css";
<SpinnerStyled />
<SpinnerStyled variant="dots" tone="success" size="lg" />
<SpinnerStyled variant="bars" speed="fast" />Overlay #
<div style={{ position: "relative", width: 200, height: 200 }}>
<img src="..." alt="..." />
<SpinnerStyled overlay />
</div>Headless #
import { useSpinner } from "@mshafiqyajid/react-spinner";
function MySpinner() {
const { spinnerProps } = useSpinner({ label: "Loading data" });
return (
<span {...spinnerProps} className="my-spinner">
{/* your animation */}
</span>
);
}API #
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "spin" | "dots" | "bars" | "pulse" | "ring" | "spin" | Animation style |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Dimensions |
| tone | "neutral" | "primary" | "success" | "warning" | "danger" | "info" | "current" | "primary" | Color |
| speed | "slow" | "normal" | "fast" | "normal" | Animation speed |
| label | string | "Loading" | Screen reader label (aria-label) |
| overlay | boolean | false | Fills parent with a translucent backdrop |
| className | string | — | Extra class on root |
| style | CSSProperties | — | Inline style override |