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>