Spinner

Basic spinner example demonstrating core behavior.

Package: @solidiom/spinner
Version: 0.0.1-next.0
Status: stable

Examples

import * as Spinner from "@solidiom/spinner"

;<Spinner.Root label="Loading data..." />

;<Spinner.Root label="Processing">
  <div class="spinner-visual">
    <span class="spinner-dot" />
  </div>
</Spinner.Root>

The spinner renders a <span> with role="status" and announces its label to screen readers. Default label is “Loading”. Provide custom children for your own spinner visual while keeping the accessible wrapper.

View source

        export function Root(props: SpinnerRootProps) {
  return (
    <span
      role="status"
      aria-label={props.label ?? "Loading"}
      class={props.class}
      style={props.style}
      {...applySemanticAttrs({ scope: "spinner", part: "root" })}
    >
      {props.children}
    </span>
  )
}