Progress — Cider UI

Selectors

<progress>: Native HTML progress element — auto-styled inside .cider scope.
.progress-indeterminate: Single-div sliding bar animation for unknown-duration progress.

Default

HTML

<progress value="60" max="100" aria-label="Progress"></progress>

With Label

Uploading... 73%

HTML

<div class="space-y-2">
  <div class="flex items-center justify-between text-sm">
    <span class="font-medium">Uploading...</span>
    <span class="text-tertiary-foreground">73%</span>
  </div>
  <progress value="73" max="100" aria-label="Uploading"></progress>
</div>

Indeterminate

HTML

<div class="progress-indeterminate" role="progressbar" aria-label="Loading"></div>

In Card

Storage

7.2 GB / 15 GB

48% of storage used. Upgrade for more space.

HTML

<div class="card max-w-sm p-6">
  <div class="flex items-center justify-between">
    <h3 class="text-sm font-semibold">Storage</h3>
    <span class="text-xs text-tertiary-foreground">7.2 GB / 15 GB</span>
  </div>
  <div class="mt-3">
    <progress value="48" max="100" aria-label="Storage usage"></progress>
  </div>
  <p class="mt-2 text-xs text-tertiary-foreground">48% of storage used. Upgrade for more space.</p>
</div>

Usage Notes

Use <progress> when you know the completion percentage.
Use .progress-indeterminate when duration is unknown (e.g., file processing).
Hide indeterminate bars with display: none when not active to reduce battery usage on mobile.

Accessibility

The native <progress> element is accessible by default. For the indeterminate variant (.progress-indeterminate), add role="progressbar" and aria-label so screen readers can announce the loading state.

<div class="progress-indeterminate" role="progressbar" aria-label="Loading"></div>