CSS only

Progress

A determinate progress bar. SCSS-only: set the value with the --ng-progress-value custom property; colour it with a token.

A ng-progress track holds a ng-progress-bar fill. Drive the fill by setting --ng-progress-value (a percentage) on the track.

Values

progress.html

<div class="ng-progress " style="--ng-progress-value: 25%">
    <div class="ng-progress-bar"></div>
</div>
<div class="ng-progress " style="--ng-progress-value: 50%">
    <div class="ng-progress-bar"></div>
</div>
<div class="ng-progress " style="--ng-progress-value: 75%">
    <div class="ng-progress-bar"></div>
</div>
<div class="ng-progress " style="--ng-progress-value: 100%">
    <div class="ng-progress-bar"></div>
</div>

Colors

Every colour token works via ng-progress-<color>.

progress.html

<div class="ng-progress ng-progress-primary" style="--ng-progress-value: 70%">
    <div class="ng-progress-bar"></div>
</div>
<div class="ng-progress ng-progress-secondary" style="--ng-progress-value: 70%">
    <div class="ng-progress-bar"></div>
</div>
<div class="ng-progress ng-progress-success" style="--ng-progress-value: 70%">
    <div class="ng-progress-bar"></div>
</div>
<div class="ng-progress ng-progress-info" style="--ng-progress-value: 70%">
    <div class="ng-progress-bar"></div>
</div>
<div class="ng-progress ng-progress-warning" style="--ng-progress-value: 70%">
    <div class="ng-progress-bar"></div>
</div>
<div class="ng-progress ng-progress-danger" style="--ng-progress-value: 70%">
    <div class="ng-progress-bar"></div>
</div>
<div class="ng-progress ng-progress-mute" style="--ng-progress-value: 70%">
    <div class="ng-progress-bar"></div>
</div>
<div class="ng-progress ng-progress-blue" style="--ng-progress-value: 70%">
    <div class="ng-progress-bar"></div>
</div>
<div class="ng-progress ng-progress-blue-sky" style="--ng-progress-value: 70%">
    <div class="ng-progress-bar"></div>
</div>
<div class="ng-progress ng-progress-green" style="--ng-progress-value: 70%">
    <div class="ng-progress-bar"></div>
</div>
<div class="ng-progress ng-progress-lime" style="--ng-progress-value: 70%">
    <div class="ng-progress-bar"></div>
</div>
<div class="ng-progress ng-progress-aguagreen" style="--ng-progress-value: 70%">
    <div class="ng-progress-bar"></div>
</div>
<div class="ng-progress ng-progress-indigo" style="--ng-progress-value: 70%">
    <div class="ng-progress-bar"></div>
</div>
<div class="ng-progress ng-progress-purple" style="--ng-progress-value: 70%">
    <div class="ng-progress-bar"></div>
</div>
<div class="ng-progress ng-progress-purple-heart" style="--ng-progress-value: 70%">
    <div class="ng-progress-bar"></div>
</div>
<div class="ng-progress ng-progress-cyan" style="--ng-progress-value: 70%">
    <div class="ng-progress-bar"></div>
</div>
<div class="ng-progress ng-progress-magenta" style="--ng-progress-value: 70%">
    <div class="ng-progress-bar"></div>
</div>
<div class="ng-progress ng-progress-yellow" style="--ng-progress-value: 70%">
    <div class="ng-progress-bar"></div>
</div>

Anatomy

ng-progress ng-progress-bar ng-progress-{color} --ng-progress-value

Reference

Generated from the component source (_ng_progress.scss).

Component info

Name	`Progress`
Type	`css`
Version	`1.0.0`
Status	`css`
CSS	`/assets/css/components/_ng_progress.scss`

Classes

.ng-progress .ng-progress- .ng-progress-bar

Tokens

--ng-progress-bg --ng-progress-fill --ng-progress-height --ng-progress-value