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.

Spinner

Shows a Loading spinner to indicate that the app is busy or the page is still loading.

Processing payment...

$100.00

import { Component } from '@angular/core';
import { HlmItemImports } from '@spartan-ng/helm/item';
import { HlmSpinnerImports } from '@spartan-ng/helm/spinner';

@Component({
	selector: 'spartan-spinner-preview',
	imports: [HlmSpinnerImports, HlmItemImports],
	template: `
		<div className="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]">
			<div hlmItem variant="muted">
				<hlm-item-media>
					<hlm-spinner />
				</hlm-item-media>
				<hlm-item-content>
					<div hlmItemTitle class="line-clamp-1">Processing payment...</div>
				</hlm-item-content>
				<hlm-item-content>
					<span class="text-sm tabular-nums">$100.00</span>
				</hlm-item-content>
			</div>
		</div>
	`,
})
export class SpinnerPreview {}

About

Spinner is built on top of ng-icons by @ashley-hunter .

Installation

npx nx g @spartan-ng/cli:ui spinner

Usage

import { HlmSpinnerImports } from '@spartan-ng/helm/spinner';

<hlm-spinner class="text-base md:text-lg" />

Examples

Custom Icon

You can replace the default spinner icon with any other icon by editing the HlmSpinner component.

If you only need to change the icon once, set the icon input to your desired icon icon="lucideLoader" and add provideIcons({ lucideLoader }) to load your custom icon.

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideLoader } from '@ng-icons/lucide';
import { HlmSpinnerImports } from '@spartan-ng/helm/spinner';

@Component({
	selector: 'spartan-spinner-custom-preview',
	imports: [HlmSpinnerImports],
	providers: [provideIcons({ lucideLoader })],
	template: `
		<div class="flex items-center">
			<hlm-spinner icon="lucideLoader" />
		</div>
	`,
})
export class SpartanSpinnerCustomPreview {}

Size

import { Component } from '@angular/core';
import { HlmSpinnerImports } from '@spartan-ng/helm/spinner';

@Component({
	selector: 'spartan-spinner-size-preview',
	imports: [HlmSpinnerImports],
	template: `
		<div class="flex items-center gap-6">
			<hlm-spinner class="text-xs" />
			<hlm-spinner class="text-base" />
			<hlm-spinner class="text-2xl" />
			<hlm-spinner class="text-[2rem]" />
		</div>
	`,
})
export class SpartanSpinnerSizePreview {}

Color

import { Component } from '@angular/core';
import { HlmSpinnerImports } from '@spartan-ng/helm/spinner';

@Component({
	selector: 'spartan-spinner-color-preview',
	imports: [HlmSpinnerImports],
	template: `
		<div class="flex items-center gap-6">
			<hlm-spinner class="text-2xl text-red-500" />
			<hlm-spinner class="text-2xl text-green-500" />
			<hlm-spinner class="text-2xl text-blue-500" />
			<hlm-spinner class="text-2xl text-yellow-500" />
			<hlm-spinner class="text-2xl text-purple-500" />
		</div>
	`,
})
export class SpartanSpinnerColorPreview {}

Button

import { Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmSpinnerImports } from '@spartan-ng/helm/spinner';

@Component({
	selector: 'spartan-spinner-button-preview',
	imports: [HlmSpinnerImports, HlmButtonImports],
	template: `
		<div class="flex flex-col items-center gap-4">
			<button hlmBtn size="sm" disabled>
				<hlm-spinner />
				Loading...
			</button>
			<button hlmBtn variant="outline" size="sm" disabled>
				<hlm-spinner />
				Please wait
			</button>
			<button hlmBtn variant="secondary" size="sm" disabled>
				<hlm-spinner />
				Processing
			</button>
		</div>
	`,
})
export class SpartanSpinnerButtonPreview {}

Badge

Syncing Updating Processing

import { Component } from '@angular/core';
import { HlmBadgeImports } from '@spartan-ng/helm/badge';
import { HlmSpinnerImports } from '@spartan-ng/helm/spinner';

@Component({
	selector: 'spartan-spinner-badge-preview',
	imports: [HlmSpinnerImports, HlmBadgeImports],
	template: `
		<div class="flex items-center gap-4 [--radius:1.2rem]">
			<span hlmBadge>
				<hlm-spinner />
				Syncing
			</span>
			<span hlmBadge variant="secondary">
				<hlm-spinner />
				Updating
			</span>
			<span hlmBadge variant="outline">
				<hlm-spinner />
				Processing
			</span>
		</div>
	`,
})
export class SpartanSpinnerBadgePreview {}

Input Group

Input Group can have spinners inside HlmInputGroupAddon

Validating...

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideArrowUp } from '@ng-icons/lucide';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
import { HlmSpinnerImports } from '@spartan-ng/helm/spinner';

@Component({
	selector: 'spartan-spinner-input-group-preview',
	imports: [HlmSpinnerImports, HlmInputGroupImports, NgIcon],
	providers: [provideIcons({ lucideArrowUp })],
	template: `
		<div class="flex w-full max-w-md flex-col gap-4">
			<hlm-input-group>
				<input hlmInputGroupInput placeholder="Send a message..." disabled />
				<hlm-input-group-addon align="inline-end">
					<hlm-spinner />
				</hlm-input-group-addon>
			</hlm-input-group>
			<hlm-input-group>
				<textarea hlmInputGroupTextarea placeholder="Send a message..." disabled></textarea>
				<hlm-input-group-addon align="block-end">
					<hlm-spinner />
					Validating...
					<button class="ml-auto" hlmInputGroupButton variant="default">
						<ng-icon name="lucideArrowUp" />
						<span class="sr-only">Send</span>
					</button>
				</hlm-input-group-addon>
			</hlm-input-group>
		</div>
	`,
})
export class SpartanSpinnerInputGroupPreview {}

Empty

Processing your request

Please wait while we process your request. Do not refresh the page.

import { Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmEmptyImports } from '@spartan-ng/helm/empty';
import { HlmSpinnerImports } from '@spartan-ng/helm/spinner';

@Component({
	selector: 'spartan-spinner-empty-preview',
	imports: [HlmSpinnerImports, HlmEmptyImports, HlmButtonImports],
	template: `
		<hlm-empty>
			<hlm-empty-header>
				<hlm-empty-media variant="icon">
					<hlm-spinner />
				</hlm-empty-media>
				<div hlmEmptyTitle>Processing your request</div>
				<div hlmEmptyDescription>Please wait while we process your request. Do not refresh the page.</div>
			</hlm-empty-header>
			<hlm-empty-content>
				<button hlmBtn variant="outline" size="sm">Cancel</button>
			</hlm-empty-content>
		</hlm-empty>
	`,
})
export class SpartanSpinnerEmptyPreview {}

Item

Use the spinner inside HlmItemMedia to indicate a loading state.

Downloading...

129 MB / 1000 MB

import { Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmItemImports } from '@spartan-ng/helm/item';
import { HlmProgressImports } from '@spartan-ng/helm/progress';
import { HlmSpinnerImports } from '@spartan-ng/helm/spinner';

@Component({
	selector: 'spartan-spinner-item-preview',
	imports: [HlmSpinnerImports, HlmItemImports, HlmButtonImports, HlmProgressImports],
	template: `
		<div class="flex w-full max-w-md flex-col gap-4 [--radius:1rem]">
			<div hlmItem variant="outline">
				<hlm-item-media variant="icon">
					<hlm-spinner />
				</hlm-item-media>
				<hlm-item-content>
					<hlm-item-title>Downloading...</hlm-item-title>
					<p hlmItemDescription>129 MB / 1000 MB</p>
				</hlm-item-content>
				<hlm-item-actions class="hidden sm:flex">
					<button hlmBtn variant="outline" size="sm">Cancel</button>
				</hlm-item-actions>
				<hlm-item-footer>
					<hlm-progress value="75">
						<hlm-progress-indicator />
					</hlm-progress>
				</hlm-item-footer>
			</div>
		</div>
	`,
})
export class SpartanSpinnerItemPreview {}

Helm API

HlmSpinner

Selector: hlm-spinner

Inputs

Prop	Type	Default	Description
icon	string	lucideLoader2	The name of the icon to be used as the spinner. Use provideIcons({ ... }) to register custom icons.
aria-label	string	Loading	Aria label for the spinner for accessibility.
class	ClassValue	-	-

Switch

Skeleton