flotilla/src/app/components/ProgressBar.svelte

<script lang="ts">
  const {current, total}: {current: number; total: number} = $props()
</script>

<div class="flex w-full">
  {#each Array(total) as _, i (i)}
    <div
      class="h-1 flex-1 transition-colors {i < current
        ? 'bg-primary text-primary-content'
        : 'bg-surface-more'}">
    </div>
  {/each}
</div>