Basic
Use a determinate progress bar when the completion value is known.
Icons
Icons by @ng-icons/tabler-icons
The component library does not provide icons.
Component Blueprint
Progress
Accessible progress indicators with determinate, indeterminate, labeled, controlled, custom styling, and RTL patterns.
Seven of ten release checks have completed.
70%
02 Usage
TS
import { FrProgressModule } from '@frame-ui-ng/components/progress';HTML
<div frProgress aria-label="Sync progress" [value]="42">
<div frProgressIndicator></div>
</div>03 Examples
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.
اكتملت معظم خطوات التحضير.
٦٦٪
04 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%
05 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.
06 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: var(--frame-radius-sm);
--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;