Progress

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

<Progress value={50} max={100}>50%</Progress>

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

<div class="flex w-full flex-col gap-8">
	<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>

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

<div class="flex w-full flex-col gap-8">
	<Progress value={50} max={100} height="h-1" />
	<Progress value={50} max={100} />
	<Progress value={50} max={100} height="h-4" />
</div>

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

<Progress value={null} />

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

<Progress value={null} 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>

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