Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
import { Component, type OnInit } from '@angular/core';
import { HlmProgress, HlmProgressIndicator } from '@spartan-ng/helm/progress';
@Component({
selector: 'spartan-progress-preview',
imports: [HlmProgressIndicator, HlmProgress],
template: `
<hlm-progress class="w-80" aria-labelledby="loading" [value]="value">
<hlm-progress-indicator />
</hlm-progress>
`,
})
export class ProgressPreview implements OnInit {
public value = 15;
ngOnInit() {
setTimeout(() => (this.value = 65), 2000);
}
}Installation
npx nx g @spartan-ng/cli:ui progress
ng g @spartan-ng/cli:ui progress
Usage
import { HlmProgressDirective, HlmProgressIndicatorDirective } from '@spartan-ng/helm/progress';<hlm-progress [value]="value">
<hlm-progress-indicator />
</hlm-progress>Brain API
BrnProgressIndicator
Selector: brn-progress-indicator
BrnProgress
Selector: brn-progress
ExportAs: brnProgress
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | null | undefined | undefined | The current progress value. |
| max | number | 100 | The maximum progress value. |
| getValueLabel | BrnProgressLabelFn | (value, max) => `${Math.round((value / max) * 100)}%` | A function that returns the label for the current progress value. |
Helm API
HlmProgressIndicator
Selector: [hlmProgressIndicator],hlm-progress-indicator
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmProgress
Selector: hlm-progress,[hlmProgress]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
Examples
Indeterminate
import { Component } from '@angular/core';
import { HlmProgress, HlmProgressIndicator } from '@spartan-ng/helm/progress';
@Component({
selector: 'spartan-progress-indeterminate',
imports: [HlmProgressIndicator, HlmProgress],
template: `
<hlm-progress class="w-80">
<hlm-progress-indicator />
</hlm-progress>
`,
})
export class ProgressIndeterminatePreview {}