Components

Progress Bar

The .quanta-progress-bar component displays completion status. It wraps one or more .quanta-progress-bar-inner elements (for stacking), and supports color, style, size, radius, and animation variants.

Basic Usage

Create a simple progress bar with inner element width set via inline style or utility classes.

<div class="quanta-progress-bar">
  <div
    class="quanta-progress-bar-inner"
    style="width: 45%;"
  ></div>
</div>

Color Variants

Apply semantic color variants by adding modifier to the outer wrapper.

<div class="quanta-progress-bar quanta-progress-success">…</div>
<div class="quanta-progress-bar quanta-progress-warning">…</div>
<div class="quanta-progress-bar quanta-progress-info">…</div>
<div class="quanta-progress-bar quanta-progress-danger">…</div>

Style Variants

Use .quanta-progress-soft, .quanta-progress-glass, or .quanta-progress-gradient on the outer.

<div class="quanta-progress-bar quanta-progress-soft">…</div>
<div class="quanta-progress-bar quanta-progress-glass">…</div>
<div class="quanta-progress-bar quanta-progress-gradient">…</div>

Striped & Animated

Add .quanta-progress-striped for stripes, and .quanta-progress-animated for moving stripes.

<div class="quanta-progress-bar quanta-progress-striped">…</div>
<div class="quanta-progress-bar quanta-progress-striped quanta-progress-animated">…</div>

Size & Radius

Control height with .quanta-progress-sm/-md/-lg, and corner rounding with .quanta-progress-rounded-none/-md/-full.

<div class="quanta-progress-bar quanta-progress-sm quanta-progress-rounded-full">…</div>

Predefined Fill

Use utility classes .quanta-progress-25/-50/-75/-100 to set inner width.

<div class="quanta-progress-bar quanta-progress-50">…</div>

Stacked Bars

For composite progress, add multiple .quanta-progress-bar-inner inside a .quanta-progress-bar with .quanta-progress-stack.

<div class="quanta-progress-bar quanta-progress-stack">
  <div class="quanta-progress-bar-inner" style="width:40%"></div>
  <div class="quanta-progress-bar-inner quanta-progress-info" style="width:30%"></div>
  <div class="quanta-progress-bar-inner quanta-progress-warning" style="width:20%"></div>
</div>

Dark Mode & Responsive

In dark mode, background and inner bar colors adjust automatically. On small screens, bar height shrinks for compact fit.