Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
import { Component, OnInit } from '@angular/core';
import {
BrnProgressComponent,
BrnProgressIndicatorComponent,
} from '@spartan-ng/ui-progress-brain';
import { HlmProgressIndicatorDirective } from '@spartan-ng/ui-progress-helm';
@Component({
selector: 'spartan-progress-preview',
standalone: true,
imports: [BrnProgressComponent, BrnProgressIndicatorComponent, HlmProgressIndicatorDirective],
template: `
<brn-progress class='w-80' aria-labelledby="loading" [value]="value">
<brn-progress-indicator hlm />
</brn-progress>
`,
})
export class ProgressPreviewComponent implements OnInit {
value = 0;
ngOnInit() {
setTimeout(() => (this.value = 33), 3000);
}
}Installation
npx nx g @spartan-ng/cli:ui progress
ng g @spartan-ng/cli:ui progress
Usage
import {
BrnProgressComponent,
BrnProgressIndicatorComponent,
} from '@spartan-ng/ui-progress-brain';
import { HlmProgressIndicatorDirective } from '@spartan-ng/ui-progress-helm';<brn-progress [value]="value">
<brn-progress-indicator hlm />
</brn-progress>Examples
Default
import { Component, OnInit } from '@angular/core';
import {
BrnProgressComponent,
BrnProgressIndicatorComponent,
} from '@spartan-ng/ui-progress-brain';
import { HlmProgressIndicatorDirective } from '@spartan-ng/ui-progress-helm';
@Component({
selector: 'spartan-progress-preview',
standalone: true,
imports: [BrnProgressComponent, BrnProgressIndicatorComponent, HlmProgressIndicatorDirective],
template: `
<brn-progress class='w-80' aria-labelledby="loading" [value]="value">
<brn-progress-indicator hlm />
</brn-progress>
`,
})
export class ProgressPreviewComponent implements OnInit {
value = 0;
ngOnInit() {
setTimeout(() => (this.value = 33), 3000);
}
}Indeterminate
import { Component } from '@angular/core';
import { BrnProgressComponent, BrnProgressIndicatorComponent } from '@spartan-ng/ui-progress-brain';
import { HlmProgressDirective, HlmProgressIndicatorDirective } from '@spartan-ng/ui-progress-helm';
@Component({
selector: 'spartan-progress-indeterminate',
standalone: true,
imports: [BrnProgressComponent, BrnProgressIndicatorComponent, HlmProgressIndicatorDirective, HlmProgressDirective],
template: `
<brn-progress hlm aria-labelledby='loading'>
<brn-progress-indicator hlm />
</brn-progress>
`,
})
export class ProgressIndeterminatePreviewComponent {}