Progress

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

export const Page = () => {
	return <Progress value={50} max={100} />;
};

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>
	);
};

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>
	);
};

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

export const Page = () => {
	return <Progress value={undefined} />;
};

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>
		</>
	);
};

<progress class="progress" value="50" max="100"></progress>