Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Loading...
 
import { Component, type OnDestroy, type OnInit } from '@angular/core';
import { RdxProgressIndicatorDirective, RdxProgressRootDirective } from '@radix-ng/primitives/progress';


@Component({
    selector: 'progress-demo',
    standalone: true,
    imports: [
        RdxProgressIndicatorDirective,
        RdxProgressRootDirective
    ],
    template: `
        <div class="ProgressRoot" [rdxValue]="progress" rdxProgressRoot>
            <div
                class="ProgressIndicator"
                [style.transform]="'translateX(-' + (100 - progress) + '%)'"
                rdxProgressIndicator
            ></div>
        </div>
    `,
    styleUrl: 'progress-demo.css'
})
export class ProgressDemoComponent implements OnInit, OnDestroy {
    progress = 10;
    intervalId!: any;


    ngOnInit() {
        this.intervalId = setInterval(() => {
            if (this.progress === 100) {
                this.progress = 10;
            } else {
                this.progress += 30;
            }
        }, 1000);
    }


    ngOnDestroy() {
        if (this.intervalId) {
            clearInterval(this.intervalId);
        }
    }
}

Features

  • Provides context for assistive technology to read the progress of a task.

Installation

Get started with importing the directive:

import { RdxProgressIndicatorDirective, RdxProgressRootDirective } from '@radix-ng/primitives/progress';

API Reference

Root

RdxProgressRootDirective

Prop Type Default
id
string
`rdx-progress-bar-${idIterator++}`
rdxMax
number
DEFAULT_MAX
rdxValue
number
MIN_PERCENT
rdxValueLabel
function
(value, max) => this.defaultGetValueLabel(value, max)
Data attribute Values
[data-state]
"complete" | "indeterminate" | "loading"
[data-value]
The current value
[data-max]
The max value

Indicator

RdxProgressIndicatorDirective Used to show the progress visually. It also makes progress accessible to assistive technologies.

Data attribute Values
[data-state]
"complete" | "indeterminate" | "loading"
[data-value]
The current value
[data-max]
The max value

Accessibility