Spinner

An accessible indicator for ongoing work.

Interactive playground

LIVE PREVIEW

Generated code

import { Spinner } from '@vrum/ui';

<Spinner
  size={24}
  label={"Loading projects"}
/>

Prop	Type	Default	Description
`size`	`number`	`20`	Size of the component.
`label`	`string`	`"Loading"`	Visible or accessible label.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`name`	`string`	none	name configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`type`	`string`	none	type configuration.
`href`	`string`	none	href configuration.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<SVGSVGElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<SVGSVGElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<SVGSVGElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<SVGSVGElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<SVGSVGElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<SVGSVGElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<SVGSVGElement>`	none	on select configuration.