Logo

Progress

Accessible progress indicators with determinate, indeterminate, labeled, controlled, custom styling, and RTL patterns.

Preview

Seven of ten release checks have completed.

70%

Usage

TS 

import { FrProgressModule } from '@frame-ui-ng/components/progress';

HTML 

<div frProgress aria-label="Sync progress" [value]="42">
  <div frProgressIndicator></div>
</div>

Examples

Basic

Use a determinate progress bar when the completion value is known.

With Field

Pair progress with Field primitives when the bar needs a label, helper copy, or visible value.

Seven of ten release checks have completed.

70%

Controlled

Bind the value to a signal when progress changes from user actions, polling, or async work.

Import queue55%

Indeterminate

Pass a null value when work is active but no reliable completion percentage is available yet.

Preparing previewWorking

RTL

The indicator follows logical inline direction, so the bar fills correctly inside RTL layouts.

اكتملت معظم خطوات التحضير.

٦٦٪

Custom Styling

Override progress tokens on the root or an ancestor to tune bar height, track color, fill treatment, border, radius, and motion locally.

Storage budget82%

Token Inspector

Hover the field wrapper, label, helper text, value, progress root, or indicator to inspect the tokens behind the full labeled progress pattern.

64%

Four files are still waiting to be processed.

Design Tokens

Use these CSS custom properties to tune progress track sizing, surfaces, indicator styling, transition timing, and indeterminate animation behavior.

SCSS 

--frame-progress-height: 0.5rem;
--frame-progress-width: 100%;
--frame-progress-radius: 999px;
--frame-progress-bg: var(--frame-accent);
--frame-progress-border: transparent;
--frame-progress-shadow: none;
--frame-progress-indicator-bg: var(--frame-primary);
--frame-progress-indicator-radius: inherit;
--frame-progress-indicator-shadow: none;
--frame-progress-transition-duration: 300ms;
--frame-progress-transition-easing: cubic-bezier(0.16, 1, 0.3, 1);
--frame-progress-indeterminate-size: 35%;
--frame-progress-indeterminate-duration: 1.25s;