Docs
Progress
Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Loading...
Loading...
import type { OnDestroy, OnInit } from '@angular/core'
import { Component } from '@angular/core'
import { ProgressDirective } from '~/components/ui/progress'
@Component({
standalone: true,
selector: 'progress-demo-new-york',
imports: [ProgressDirective],
template: `<div ubProgress [progress]="progress" class="w-[60%]"></div>`,
})
export class ProgressDemoNewYork implements OnInit, OnDestroy {
progress = 10
intervalId!: NodeJS.Timeout
ngOnInit(): void {
this.intervalId = setTimeout(() => {
this.progress = 66
}, 500)
}
ngOnDestroy(): void {
if (this.intervalId) {
clearInterval(this.intervalId)
}
}
}import type { OnDestroy, OnInit } from '@angular/core'
import { Component } from '@angular/core'
import { ProgressDirective } from '~/components/ui/progress'
@Component({
standalone: true,
selector: 'progress-demo-default',
imports: [ProgressDirective],
template: `<div ubProgress [progress]="progress" class="w-[60%]"></div>`,
})
export class ProgressDemoDefault implements OnInit, OnDestroy {
progress = 10
intervalId!: NodeJS.Timeout
ngOnInit(): void {
this.intervalId = setTimeout(() => {
this.progress = 66
}, 500)
}
ngOnDestroy(): void {
if (this.intervalId) {
clearInterval(this.intervalId)
}
}
}Installation
pnpm dlx shadcn-ng@latest add progress
npx shadcn-ng@latest add progress
npx shadcn-ng@latest add progress
bunx --bun shadcn-ng@latest add progress
Install the following dependencies:
pnpm add @radix-ng/primitives
npm install @radix-ng/primitives
yarn add @radix-ng/primitives
bun add @radix-ng/primitives
Copy and paste the following code into your project.
import { Component, computed, input, numberAttribute } from '@angular/core'
import { RdxProgressIndicatorDirective, RdxProgressRootDirective } from '@radix-ng/primitives/progress'
import { cn } from '~/lib/utils'
@Component({
standalone: true,
selector: 'ubProgress',
imports: [RdxProgressIndicatorDirective],
host: {
'[class]': 'computedClass()',
},
hostDirectives: [
{
directive: RdxProgressRootDirective,
inputs: ['value:progress', 'max', 'valueLabel'],
},
],
template: `
<div rdxProgressIndicator class="h-full w-full flex-1 bg-primary transition-all" [style.transform]="'translateX(-' + (100 - (progress() || 0)) + '%)'"></div>
`,
})
export class ProgressDirective {
progress = input(0, {
transform: numberAttribute,
})
class = input<string>()
computedClass = computed(() => cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', this.class()))
}import { Component, computed, input, numberAttribute } from '@angular/core'
import { RdxProgressIndicatorDirective, RdxProgressRootDirective } from '@radix-ng/primitives/progress'
import { cn } from '~/lib/utils'
@Component({
standalone: true,
selector: 'ubProgress',
imports: [RdxProgressIndicatorDirective],
host: {
'[class]': 'computedClass()',
},
hostDirectives: [
{
directive: RdxProgressRootDirective,
inputs: ['value:progress', 'max', 'valueLabel'],
},
],
template: `
<div rdxProgressIndicator class="h-full w-full flex-1 bg-primary transition-all" [style.transform]="'translateX(-' + (100 - (progress() || 0)) + '%)'"></div>
`,
})
export class ProgressDirective {
progress = input(0, {
transform: numberAttribute,
})
class = input<string>()
computedClass = computed(() => cn('relative h-4 w-full overflow-hidden rounded-full bg-secondary', this.class()))
}Update the import paths to match your project setup.
Usage
import { ProgressDirective } from '~/components/ui/progress'<div ubProgress [progress]="10"></div>