Loading, one file.

Bars, spinners and skeletons that follow your page's theme on their own. Click anything below — every card is live.

Determinate bar

A fake upload drives set(); done() flips to the success color.

Start upload

var bar = Progress.bar('#bar-slot', {
  label: 'Uploading photo…',
  showValue: true, autoRemove: true })
bar.set(42)   // …later:
bar.done()

Indeterminate

No known total — a segment sweeps until set() or done() promotes it.

Start done()

Progress.bar('#ind-slot', {
  indeterminate: true,
  label: 'Contacting server…' })

Spinner sizes

role="status" with visually-hidden text — screen readers hear "Loading…".

Progress.spinner('#spinner-slot',
  { size: 28, label: 'Loading results…' })

Skeleton over a real card

Original content is hidden, not removed — Reveal calls release() and restores it exactly.

Ada Lovelace Wrote the first program — for a machine that didn't exist yet. Patience level: legendary.

Cover Reveal

var sk = Progress.skeleton('#sk-target',
  { avatar: true, lines: 3 })
sk.release()  // or Progress.skeleton.release(el)

Declarative

These three were built from markup alone on page load.

inline spinner

<div data-vpg="bar" data-vpg-value="65"
     data-vpg-label="Profile complete"
     data-vpg-show-value></div>

Sizes, colors & motion

Small + success variants. With prefers-reduced-motion, shimmer, sweep and spin all become a calm opacity pulse — try it in your OS settings.

Progress.bar(el, { size: 'sm',
  color: 'success', value: 80 })