Progress & loading — StyloftCSS

Components/Progress & loading

Meter

A native meter represents a measured value, rather than task completion.

Live preview

Storage example65 of 100

View HTML / PlaygroundHTML source

example.htmlHTML

<label class="sl-field"
  >Storage example<meter
    class="sl-meter"
    min="0"
    max="100"
    low="25"
    high="80"
    optimum="40"
    value="65"
  >
    65 of 100
  </meter></label
>

HTML source · enable JavaScript for the playground13 lines · UTF-8

ProgressBar

A native progress indicator. Your application updates its value.

Live preview

Example task progress64%

View HTML / PlaygroundHTML source

example.htmlHTML

<label class="sl-field"
  >Example task progress<progress class="sl-progress" max="100" value="64">
    64%
  </progress></label
>

HTML source · enable JavaScript for the playground5 lines · UTF-8

ProgressCircle

A CSS circular indicator. Update both its CSS value and accessible value in your application.

Live preview

View HTML / PlaygroundHTML source

example.htmlHTML

<div
  class="sl-progress-circle"
  style="--sl-progress: 64%"
  role="progressbar"
  aria-label="Example task"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="64"
>
  <span aria-hidden="true">64%</span>
</div>

HTML source · enable JavaScript for the playground11 lines · UTF-8

Skeleton

An animated loading placeholder that stays static with reduced motion.

Live preview

Loading placeholder example

View HTML / PlaygroundHTML source

example.htmlHTML

<div class="sl-stack" role="status" aria-label="Illustrative loading placeholder">
  <div class="sl-skeleton sl-skeleton--cover" aria-hidden="true"></div>
  <div class="sl-skeleton" aria-hidden="true"></div>
  <div class="sl-skeleton" style="max-inline-size: 60%" aria-hidden="true"></div>
  <span class="sl-help">Loading placeholder example</span>
</div>

HTML source · enable JavaScript for the playground6 lines · UTF-8

Spinner

CSS rotation with a readable status label and reduced-motion fallback.

Live preview

Loading example

View HTML / PlaygroundHTML source

example.htmlHTML

<span class="sl-cluster" role="status"
  ><span class="sl-loading" aria-hidden="true"></span> Loading example</span
>

HTML source · enable JavaScript for the playground3 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.