Skip to content

CircleSpinner

Default circle spinner

Show code
default.tsx
import { CircleSpinner } from "@hrc/spinner";
export function CircleSpinnerDefault() {
return <CircleSpinner />;
}

Colors

Use the color prop to change the color of the spinner.

Show code
colors.tsx
import { CircleSpinner } from "@hrc/spinner";
export function CircleSpinnerColors() {
return (
<>
<CircleSpinner color="primary" />
<CircleSpinner color="secondary" />
<CircleSpinner color="error" />
<CircleSpinner color="info" />
<CircleSpinner color="warning" />
<CircleSpinner color="success" />
</>
);
}

Sizes

Set the size prop to change the size of the spinner.

Show code
sizes.tsx
import { CircleSpinner } from "@hrc/spinner";
export function CircleSpinnerSizes() {
return (
<>
<CircleSpinner color="error" size="small" />
<CircleSpinner color="error" />
<CircleSpinner color="error" size="large" />
</>
);
}

Speeds

Set the speed prop to change the speed of the spinner.

Show code
speeds.tsx
import { CircleSpinner } from "@hrc/spinner";
export function CircleSpinnerSpeeds() {
return (
<>
<CircleSpinner color="info" speed="slow" />
<CircleSpinner color="info" />
<CircleSpinner color="info" speed="fast" />
</>
);
}

API

See documentation below for reference to all of the props, classes and CSS variables (custom properties) available for <CircleSpinner />: