Progress

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

main.ts

styles.css

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);
        }
    }
}

.ProgressRoot {
    position: relative;
    overflow: hidden;
    background: var(--black-a9);
    border-radius: 99999px;
    width: 220px;
    display: flex;
    height: 25px;

    /* Fix overflow clipping in Safari */
    /* https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0 */
    transform: translateZ(0);
}

.ProgressIndicator {
    background-color: white;
    width: 100%;
    height: 100%;
    transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
}

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`