Spinner

A loading indicator driven by the aria-busy="true" attribute. No extra markup — the spinner is injected via CSS on any element that has aria-busy. Accessible by default: screen readers announce "loading" automatically.

Preview · Spinner

Code

HTML · @primus/ui-core

<!-- Inline spinner (element becomes the spinner) -->
<div aria-busy="true"></div>

<!-- Sizes -->
<div aria-busy="true" data-spinner="small"></div>    <!-- 1rem -->
<div aria-busy="true" data-spinner="large"></div>    <!-- 3rem -->
<div aria-busy="true" data-spinner="xlarge"></div>   <!-- 4rem -->

<!-- Overlay mode — dims and disables children while loading -->
<div aria-busy="true" data-spinner="overlay large">
  <table><!-- content is dimmed while aria-busy="true" --></table>
</div>

<!-- Button with spinner -->
<button disabled>
  <div aria-busy="true" data-spinner="small" style="width:1rem;height:1rem"></div>
  Saving...
</button>

React

// Inline spinner in a button
function SubmitButton({ isLoading, children, ...props }) {
  return (
    <button disabled={isLoading} {...props}>
      {isLoading && (
        <div
          aria-busy="true"
          data-spinner="small"
          style={{ width: '1rem', height: '1rem', display: 'inline-block', marginRight: 6 }}
        />
      )}
      {children}
    </button>
  );
}

// Section overlay
function DataSection({ isLoading, children }) {
  return (
    <div
      aria-busy={isLoading || undefined}
      data-spinner={isLoading ? 'overlay large' : undefined}
    >
      {children}
    </div>
  );
}

Angular

<!-- Button -->
<button [disabled]="isLoading">
  <div *ngIf="isLoading" aria-busy="true" data-spinner="small"
    style="width:1rem;height:1rem;display:inline-block;margin-right:6px"></div>
  {{ isLoading ? 'Saving...' : 'Save' }}
</button>

<!-- Overlay on a section -->
<div [attr.aria-busy]="isLoading || null"
  [attr.data-spinner]="isLoading ? 'overlay large' : null">
  <primus-data-table [columns]="cols" [data]="rows"></primus-data-table>
</div>

Props

Attribute	Value	Description
aria-busy	"true"	Activates the spinner. Remove or set to "false" to hide.
data-spinner	"small" | "large" | "xlarge" | "overlay"	Size and mode. Combine: "overlay large".

Version history

See the Changelog for version history and breaking changes.