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 { HlmProgressImports } from '@spartan-ng/helm/progress';

@Component({
	selector: 'spartan-progress-preview',
	imports: [HlmProgressImports],
	template: `
		<hlm-progress class="w-80" [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 { HlmProgressImports } from '@spartan-ng/helm/progress';

<hlm-progress value="33">
   <hlm-progress-indicator />
</hlm-progress>

Animation

The indeterminate animation animate-indeterminate is provided by @spartan-ng/brain/hlm-tailwind-preset.css . Here are two options for adding the animation to your project.

src/styles.css

/* 1. default import */
@import '@spartan-ng/brain/hlm-tailwind-preset.css';

/* 2. add animate-indeterminate animation */
@theme inline {
	--animate-indeterminate: indeterminate 4s ease-in-out infinite;
	@keyframes indeterminate {
		0% {
			transform: translateX(-100%) scaleX(0.5);
		}
		100% {
			transform: translateX(100%) scaleX(0.5);
		}
	}
}

Adjust the animation to your needs by changing duration, easing function or keyframes by overriding the CSS variable --animate-indeterminate or the @keyframes indeterminate in your global styles.

src/styles.css

@import '@spartan-ng/brain/hlm-tailwind-preset.css';

/* adjust animation duration  */
@theme inline {
-	--animate-indeterminate: indeterminate 4s ease-in-out infinite;
+	--animate-indeterminate: indeterminate 3s ease-in-out infinite;
}

Examples

Indeterminate

import { Component } from '@angular/core';
import { HlmProgressImports } from '@spartan-ng/helm/progress';

@Component({
	selector: 'spartan-progress-indeterminate',
	imports: [HlmProgressImports],
	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