Progress

Overview

Progress is often used as loader. However, it suited very well statistic use cases.

In a second time, there is also CounterProgress, a Progress sub-component where main purpose is to handle the updated progress value display.

Here below are everything you have to know about Astropine's Progress components.

Default Bar Progress

By default, duration is set to 1000ms, i.e 1sec. Bar Progress will go to 100%. The component take initially its parent's width.

Copied !

import { BarProgress } from "$components/progress.component";

export function BarProgressExample() {
	return (
		<div class="w-64 p-8 border rounded-sm bg-white">
			<BarProgress />
		</div>
	);
}

Default Counter Progress

By default, duration is set to 1000ms, i.e 1sec. Bar Progress will go to 100%. The component take initially its parent's width.

Copied !

import { CounterProgress } from "$components/progress.component";

export function CounterProgressExample() {
	return (
		<div class="w-64 p-8 flex justify-center items-center border rounded-sm bg-white">
			<CounterProgress />
		</div>
	);
}

Value Bar Progress

Setting value props will be progress max.

Bar

Counter

Copied !

import { BarProgress, CounterProgress } from "$components/progress.component";

export function VallueProgressExample() {
	return (
		<div class="w-64 p-8 border flex flex-col gap-y-4 rounded-sm bg-white">
			<div class="flex items-center gap-x-4">
				<h4>Bar</h4>
				<BarProgress value={84} />
			</div>
			<div class="flex items-center gap-x-4">
				<h4>Counter</h4>
				<CounterProgress value={76} />
			</div>
		</div>
	);
}

Theme Color Bar Progress

To stylize a bit our component, you can apply theme color classes.

Copied !

import { BarProgress } from "$components/progress.component";

export function ThemeColorBarProgressExample() {
	return (
		<div class="w-full flex flex-col gap-y-4 items-center p-8 border rounded-sm bg-white">
			<BarProgress class="h-6" value={50} />
			<BarProgress class="h-6" type="primary" value={92} />
			<BarProgress class="h-6" type="secondary" />
			<BarProgress class="h-6" type="success" value={75} />
			<BarProgress class="h-6" type="danger" value={67} />
			<BarProgress class="h-6" type="info" value={39} />
			<BarProgress class="h-6" type="warning" value={84} />
		</div>
	);
}

Interval Duration Progress

There are two props you will use to manipulate duration. Either you use interval props, either you use duration.

The difference is pretty obvious. By using interval, what you want is setting how progress will be incremented. By using duration, it's time progress get to max value.

Bar

Counter

Copied !

import { BarProgress, CounterProgress } from "$components/progress.component";

export function IntervalAndDurationProgressExample() {
	return (
		<div class="w-full flex flex-col gap-y-8 items-center p-8 border rounded-sm bg-white">
			<div class="flex flex-col justify-center items-center w-full gap-y-4">
				<h4>Bar</h4>
				<BarProgress interval={250} value={76} />
				<BarProgress duration={4000} value={76} />
				<BarProgress duration={4000} value={22} />
			</div>
			<div class="flex flex-col justify-center items-center">
				<h4>Counter</h4>
				<CounterProgress interval={250} value={76} />
				<CounterProgress duration={4000} value={76} />
				<CounterProgress duration={4000} value={22} />
			</div>
		</div>
	);
}

Custom Class Bar Progress

You don't want to use theme color classes ? Thanks to tailwind, you can apply some custom classes on your own.

Check the example to see how it's done.

Copied !

import { BarProgress } from "$components/progress.component";

export function CustomClassProgressExample() {
	return (
		<div class="w-full flex flex-col gap-y-4 items-center p-8 border rounded-sm bg-white">
			<BarProgress class="[&>span]:bg-slate-400" interval={150} value={76} />
			<BarProgress
				class="h-2 rounded-none [&>span]:bg-blue-300"
				duration={1500}
				value={62}
			/>
		</div>
	);
}

Track Value Bar Progress

It would be good to get the current progress value ! Don't worry, I got you.

Simply use Alpine dispatch event x-on:track and capture the value. See example below.

Copied !

import { BarProgress } from "$components/progress.component";

export function TrackValueBarProgressExample() {
	return (
		<div
			x-data="{ progressValue: 0 }"
			class="w-full flex items-center gap-x-2 p-8 border rounded-sm bg-white"
		>
			<BarProgress
				value={84}
				duration={3000}
				x-on:track="progressValue = $event.detail.value;"
			/>
			<span x-text="`${progressValue}%`" x-log="progressValue"></span>
		</div>
	);
}

No Animation Bar Progress

About animation, in some cases or simply because you don't want to, you can get rid of it with noAnimation props.

Copied !

import { BarProgress } from "$components/progress.component";

export function NoAnimationBarProgressExample() {
	return (
		<div
			x-data="{ progressValue: 0 }"
			class="w-full flex items-center gap-x-2 p-8 border rounded-sm bg-white"
		>
			<BarProgress
				value={92}
				x-on:track="progressValue = $event.detail.value;"
				noAnimation
			/>
			<span x-text="`${progressValue}%`" x-log="progressValue"></span>
		</div>
	);
}