Progress — Lumora

Living Documentation

Progress bars and rings for jobs, uploads, and task completion state

This page standardizes determinate progress visuals using token-based styles, thickness variants, stacked compositions, animated states, and circular progress indicators. Use the playground to generate copy-ready markup.

Variant matrix Thickness modes Live controls Copy-ready snippets

Catalog Blocks 6 Variants, sizes, states, composition, snippets, playground

Bar Types 4 Solid, striped, animated, stacked

Thickness 3 Thin, default, thick tracks

Preview State 64% - Default Updates from playground controls

1. Variant Matrix

Core bar variants used in dashboards and forms

Solid intent bars

Build pipeline72%

Documentation46%

Striped and animated

Data migration58%

Background sync84%

2. Interaction Playground

Build a custom progress style recipe

Value

Intent

Thickness

Striped fill

Animated stripes

Show numeric label

Use circular ring preview

Live Output

64% Default

64% value, default thickness, label on.

3. Size and Layout

Track thickness scale and ring dimensions

Track thickness options

Thin32%

Default58%

Thick79%

Ring sizes

42%

67%

91%

4. State Modeling

Warning, error, complete and paused states

State bars

Queued15%

Attention needed49%

Failed63%

Stacked completion lanes

Done 46% - Running 32% - Pending 22% 100%

5. Composition Patterns

Usage inside project cards, upload jobs, and KPI modules

Project card completion

Mobile redesign sprint74%

File upload status

assets_bundle.zip89%

6. Real-use Snippets

Copy-ready examples for standard bars, animated bars, and rings

Standard Bar

<div class="lumora-progress">
  <div class="lumora-progress__bar" style="width:64%; background: var(--brand);"></div>
</div>

Animated Striped Bar

<div class="lumora-progress lumora-progress--striped lumora-progress--animated">
  <div class="lumora-progress__bar" style="width:80%; background: var(--info);"></div>
</div>

Circular Ring

<div class="progress-ring" style="--value:72; --ring-size:88px; --ring-fill: var(--brand);">
  72%
</div>