Progress - Skeleton

Colors

Set the color using the meterBg prop.

<script>
	import { Progress } from '@skeletonlabs/skeleton-svelte';
</script>

<div class="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.

<script>
	import { Progress } from '@skeletonlabs/skeleton-svelte';
</script>

<div class="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.

<script>
	import { Progress } from '@skeletonlabs/skeleton-svelte';
</script>

<Progress value={undefined} meterAnimate="my-custom-animation" />

<style>
	/*
		Note: The `:global` modifier is used to apply the
		animation to the progress bar because Svelte styles
		are scoped by default.
	*/
	:global(.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.