Progress

Colors

Set the color using the meterBg prop.

import { Progress } from '@skeletonlabs/skeleton-react';

export const Page = () => {
	return (
		<div className="flex flex-col gap-8 w-full">
			<Progress value={50} max={100} meterBg="bg-primary-500" />
			<Progress value={50} max={100} meterBg="bg-secondary-500" />
			<Progress value={50} max={100} meterBg="bg-tertiary-500" />
		</div>
	);
};

Height

Set the height using the height prop.

import { Progress } from '@skeletonlabs/skeleton-react';

export const Page = () => {
	return (
		<div className="flex flex-col gap-8 w-full">
			<Progress value={50} max={100} />
			<Progress value={50} max={100} height="h-4" />
			<Progress value={50} max={100} height="h-8" />
		</div>
	);
};

Indeterminate

When no value is present, or the value is undefined, an indeterminate animation will be shown.

Custom Animations

A custom indeterminate animation can be set by providing an animation class to the meterAnimate prop.

import { Progress } from '@skeletonlabs/skeleton-react';

export const Page = () => {
	return (
		<>
			<Progress value={undefined} meterAnimate="my-custom-animation" />

			{/* RECOMMENDED: add these styles to your global stylesheet. */}
			<style>{`
                    .my-custom-animation {
                        animation: my-custom-animation 2s ease-in-out infinite;
                    }
                    @keyframes my-custom-animation {
                        0% {
                            translate: -100%;
                        }
                        25% {
                            scale: 1;
                        }
                        50% {
                            scale: 0.25 1;
                            translate: 50%;
                        }
                        75% {
                            scale: 1;
                        }
                        100% {
                            translate: 200%;
                        }
                    }
            `}</style>
		</>
	);
};

Native Alternative

A native progress element is available cross browser, but does not support indeterminate animations.

API Reference

Property	Type	Description
`value`	number	Set the value
`max`	number	Set the maximum value
`labelledBy`	string	Set the aria-labelledby
`base`	string	Set root base classes
`bg`	string	Set root background classes
`width`	string	Set root width classes
`height`	string	Set root height classes
`rounded`	string	Set root rounded classes
`classes`	string	Set root arbitrary classes
`meterBase`	string	Set meter base classes.
`meterBg`	string	Set meter bg classes
`meterRounded`	string	Set meter rounded classes.
`meterTransition`	string	Set meter transition classes.
`meterAnimate`	string	Set meter animation classes for indeterminate mode.
`meterClasses`	string	Set meter arbitrary classes.