Feedback

Spinner

A rotating icon that shows something is loading, beside text that says what.

Class name	Type	Description
`loadingplf:loading`	Component	A spinner that turns

Default

The spinner draws itself; say what is loading in text beside it.

Loading…

<div class="flex flex-wrap items-center gap-4" role="status">
  <span class="loading"></span>
  <span>Loading…</span>
</div>

<div class="plf:flex plf:flex-wrap plf:items-center plf:gap-4" role="status">
  <span class="plf:loading"></span>
  <span>Loading…</span>
</div>

import { Spinner } from '@pelatform/react';

export function Example() {
  return (
    <div className="flex flex-wrap items-center gap-4" role="status">
      <Spinner />
      <span>Loading…</span>
    </div>
  );
}

import { Spinner } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <div className="plf:flex plf:flex-wrap plf:items-center plf:gap-4" role="status">
      <Spinner />
      <span>Loading…</span>
    </div>
  );
}

Sizes

<div class="flex flex-wrap items-center gap-4">
  <span class="loading" style="--plf-spinner-size: 12px"></span>
  <span class="loading"></span>
  <span class="loading" style="--plf-spinner-size: 24px"></span>
</div>

<div class="plf:flex plf:flex-wrap plf:items-center plf:gap-4">
  <span class="plf:loading" style="--plf-spinner-size: 12px"></span>
  <span class="plf:loading"></span>
  <span class="plf:loading" style="--plf-spinner-size: 24px"></span>
</div>

import type { CSSProperties } from 'react';
import { Spinner } from '@pelatform/react';

export function Example() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Spinner style={{ '--plf-spinner-size': '12px' } as CSSProperties} />
      <Spinner />
      <Spinner style={{ '--plf-spinner-size': '24px' } as CSSProperties} />
    </div>
  );
}

import type { CSSProperties } from 'react';
import { Spinner } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <div className="plf:flex plf:flex-wrap plf:items-center plf:gap-4">
      <Spinner style={{ '--plf-spinner-size': '12px' } as CSSProperties} />
      <Spinner />
      <Spinner style={{ '--plf-spinner-size': '24px' } as CSSProperties} />
    </div>
  );
}

Color

<div class="flex flex-wrap items-center gap-4">
  <span class="loading"></span>
  <span class="loading" style="--plf-spinner-color: var(--plf-color-primary)"></span>
  <span class="loading" style="--plf-spinner-color: var(--plf-color-danger)"></span>
</div>

<div class="plf:flex plf:flex-wrap plf:items-center plf:gap-4">
  <span class="plf:loading"></span>
  <span class="plf:loading" style="--plf-spinner-color: var(--plf-color-primary)"></span>
  <span class="plf:loading" style="--plf-spinner-color: var(--plf-color-danger)"></span>
</div>

import type { CSSProperties } from 'react';
import { Spinner } from '@pelatform/react';

export function Example() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Spinner />
      <Spinner style={{ '--plf-spinner-color': 'var(--plf-color-primary)' } as CSSProperties} />
      <Spinner style={{ '--plf-spinner-color': 'var(--plf-color-danger)' } as CSSProperties} />
    </div>
  );
}

import type { CSSProperties } from 'react';
import { Spinner } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <div className="plf:flex plf:flex-wrap plf:items-center plf:gap-4">
      <Spinner />
      <Spinner style={{ '--plf-spinner-color': 'var(--plf-color-primary)' } as CSSProperties} />
      <Spinner style={{ '--plf-spinner-color': 'var(--plf-color-danger)' } as CSSProperties} />
    </div>
  );
}

Inside a button

<button class="btn btn-primary" disabled aria-busy="true">
  <span class="loading"></span>
  Saving…
</button>
<button class="btn btn-outline" disabled aria-busy="true">
  Please wait
  <span class="loading"></span>
</button>

<button class="plf:btn plf:btn-primary" disabled aria-busy="true">
  <span class="plf:loading"></span>
  Saving…
</button>
<button class="plf:btn plf:btn-outline" disabled aria-busy="true">
  Please wait
  <span class="plf:loading"></span>
</button>

import { Button, Spinner } from '@pelatform/react';

export function Example() {
  return (
    <>
      <Button color="primary" loading>
        <Spinner />
        Saving…
      </Button>
      <Button variant="outline" loading>
        Please wait
        <Spinner />
      </Button>
    </>
  );
}

import { Button, Spinner } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <>
      <Button color="primary" loading>
        <Spinner />
        Saving…
      </Button>
      <Button variant="outline" loading>
        Please wait
        <Spinner />
      </Button>
    </>
  );
}

Inside a badge

Syncing

<span class="badge badge-primary badge-soft">
  <span class="loading" style="--plf-spinner-size: 12px"></span>
  <span class="badge-label">Syncing</span>
</span>

<span class="plf:badge plf:badge-primary plf:badge-soft">
  <span class="plf:loading" style="--plf-spinner-size: 12px"></span>
  <span class="plf:badge-label">Syncing</span>
</span>

import type { CSSProperties } from 'react';
import { Badge, BadgeLabel, Spinner } from '@pelatform/react';

export function Example() {
  return (
    <Badge color="primary" variant="soft">
      <Spinner style={{ '--plf-spinner-size': '12px' } as CSSProperties} />
      <BadgeLabel>Syncing</BadgeLabel>
    </Badge>
  );
}

import type { CSSProperties } from 'react';
import { Badge, BadgeLabel, Spinner } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Badge color="primary" variant="soft">
      <Spinner style={{ '--plf-spinner-size': '12px' } as CSSProperties} />
      <BadgeLabel>Syncing</BadgeLabel>
    </Badge>
  );
}

Inside an input group

Address

Checking availability…

<div class="field">
  <label class="field-label" for="spinner-address">Address</label>
  <div class="input-group" aria-busy="true">
    <input class="input-group-control" id="spinner-address" type="text" value="my-workspace" readonly aria-describedby="spinner-address-status">
    <span class="loading"></span>
  </div>
  <p class="field-help" role="status" id="spinner-address-status">Checking availability…</p>
</div>

<div class="plf:field">
  <label class="plf:field-label" for="spinner-address">Address</label>
  <div class="plf:input-group" aria-busy="true">
    <input class="plf:input-group-control" id="spinner-address" type="text" value="my-workspace" readonly aria-describedby="spinner-address-status">
    <span class="plf:loading"></span>
  </div>
  <p class="plf:field-help" role="status" id="spinner-address-status">Checking availability…</p>
</div>

import { useId } from 'react';
import { Spinner } from '@pelatform/react';

export function Example() {
  const id = useId();

  return (
    <div className="field">
      <label className="field-label" htmlFor={id}>Address</label>
      <div className="input-group" aria-busy="true">
        <input className="input-group-control" id={id} type="text" value="my-workspace" readOnly aria-describedby={`${id}-status`} />
        <Spinner />
      </div>
      <p className="field-help" role="status" id={`${id}-status`}>Checking availability…</p>
    </div>
  );
}

import { useId } from 'react';
import { Spinner } from '@pelatform/react/prefixed';

export function Example() {
  const id = useId();

  return (
    <div className="plf:field">
      <label className="plf:field-label" htmlFor={id}>Address</label>
      <div className="plf:input-group" aria-busy="true">
        <input className="plf:input-group-control" id={id} type="text" value="my-workspace" readOnly aria-describedby={`${id}-status`} />
        <Spinner />
      </div>
      <p className="plf:field-help" role="status" id={`${id}-status`}>Checking availability…</p>
    </div>
  );
}

React

Spinner from @pelatform/react renders this span, which the CSS draws, so say what is loading in text beside it.

It takes a span’s props, className, style and ref included.

CSS variables

Override on a root or on a single spinner.

Variable	Default
`--plf-spinner-size`	Space 4 (16px), for width and height
`--plf-spinner-color`	`inherit`
`--plf-spinner-duration`	`1s` for one turn