Spartans get ready! v1 is coming!

We are very close to our first stable release. Expect more announcements in the coming weeks. v1 was made possible by our partner Zerops.

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

Usage

import { HlmProgress, HlmProgressIndicator } from '@spartan-ng/helm/progress';

<hlm-progress [value]="value">
   <hlm-progress-indicator />
</hlm-progress>

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 {}

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	-	-

Radio Group

Popover