Progress

Determinate progress bar styled for both the native <progress> element and a .progress+.progress__value div pair (for cases that need richer markup, animation control, or fallbacks).

Live

Native <progress>

Live

25% 50% 75% 90% 40%

HTML

<progress value="0.25" max="1">25%</progress>
<progress value="0.5" max="1" class="is-primary" style="margin-top: 0.5rem">50%</progress>
<progress value="0.75" max="1" class="is-warning" style="margin-top: 0.5rem">75%</progress>
<progress value="0.9" max="1" class="is-success" style="margin-top: 0.5rem">90%</progress>
<progress value="0.4" max="1" class="is-danger" style="margin-top: 0.5rem">40%</progress>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'element-progress')
);

Playground

Div fallback (.progress)

Live

HTML

<div class="progress" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">
<div class="progress__value" style="width: 35%"></div>
</div>
<div class="progress is-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="margin-top: 0.5rem">
<div class="progress__value" style="width: 60%"></div>
</div>
<div class="progress is-warning" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="margin-top: 0.5rem">
<div class="progress__value" style="width: 80%"></div>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'element-progress')
);

Playground

Markup

<progress value="35" max="100">35%</progress>

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

When to use

Use the native <progress> element by default: it carries semantics and reports value to assistive tech.
Use .progress + .progress__value when you need richer DOM (icons, labels, segmented bars). Add role="progressbar" and aria-valuenow/min/max yourself.
For indeterminate progress (no value), the framework does not ship animation. Wrap with your own keyframes inside a prefers-reduced-motion guard.

Variables

Variable	Default	Notes
`$selector`	`'progress, .progress'`	Native element + class fallback.
`$value-selector`	`'.progress__value'`	Inner fill for the div fallback.
`$height`	`0.5rem`	Track height.
`$border-radius`	`999px`	Pill default.
`$track-mix`	`12%`	Track opacity vs. `currentColor` via `color-mix`.

See Combinations and light variants for $enable-light, $default-combination, and $controls — cross-cutting plumbing common to every theme-aware component.

Override example

@use '@adnap/krysalicss/element/progress' with (
  $height: 0.75rem,
  $border-radius: 4px,
);

Tokens consumed

Token	Used for
`--kc-progress-fg`	Default fill colour.
`--kc-{label}-fg`	Each combination modifier's fill.