EEnterUI
DocsComponentsThemesDonation
Get Started
      • Skeleton
      • Spinner
EnterUIDocsProduct OperationsFeedback StatusLoadingSpinner
Product OperationsUpdated 6 May 2026

Spinner

A refined loading indicator for inline and compact async states.

Spinner keeps loading feedback visible without competing with the surrounding interface. Use it for compact pending states where a full skeleton would be too heavy.

#Default usage

Spinner sizes

Size the indicator to the density of the UI around it.

Code
<div className="docs-preview-row">
  <Spinner size="sm" label="Loading compact preview" />
  <Spinner label="Loading preview" />
  <Spinner size="lg" label="Loading large preview" />
</div>

#Import

Code
import { Spinner } from "@froggdesign/enter-ui-react";

#Accessibility

Spinner renders role="status" with an accessible label. Motion is reduced for users who prefer less animation.

#API

  • size: sm, md, or lg.
  • label defaults to Loading.
  • Extends span props.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

PreviousSkeleton
NextToast

On this page

  1. Default usage
  2. Import
  3. Accessibility
  4. API
  5. Styling