RRenDSv0.13.0
GitHubGet started

Primitive

Progress CSS-only

Bar that fills from 0 to a max value. Determinate (you know the percentage) or indeterminate (continuous animation when the duration is unknown).

About

Overview

Use Progress when a long task has measurable progress: file upload, multi-step wizard, video buffering. For short waits where you don't know the duration, use a Spinner instead.

Live

Demo

<div class="ren-progress" role="progressbar"
     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  <div class="ren-progress-bar" style="width: 60%"></div>
</div>

Reference

API

ClassEffect
.ren-progressThe track. Use with role="progressbar".
.ren-progress-barThe filled portion. Set width: NN% or use the data attribute on the parent.
.ren-progress-indeterminateContinuous-loop animation when progress is unknown.
.ren-progress-success / -warning / -dangerStatus colors for the bar.

Inclusive by default

Accessibility

  • Always set role="progressbar" on the track.
  • For determinate: aria-valuenow, aria-valuemin, aria-valuemax.
  • For indeterminate: omit aria-valuenow; add aria-label.