Progress bar with custom colors.

<!--
  Адаптировано (docs/PORTING.md §Progress): оригинал меняет значение через
  `setTimeout` (45 → 75) — недетерминированно для статичного скриншота.
  Значение зафиксировано пропом.
-->
<script setup lang="ts">
import { Progress } from "@/components/ui/progress"

const progress = 45
</script>

<template>
  <div class="mx-auto flex w-full max-w-xs flex-col gap-6">
    <Progress :model-value="progress" class="**:data-[slot=progress-indicator]:bg-green-500" />
    <Progress :model-value="progress" class="**:data-[slot=progress-indicator]:bg-yellow-500" />
    <Progress :model-value="progress" class="**:data-[slot=progress-indicator]:bg-fuchsia-500" />
    <Progress :model-value="progress" class="**:data-[slot=progress-indicator]:bg-indigo-500" />
    <Progress :model-value="progress" class="**:data-[slot=progress-indicator]:bg-violet-500" />
  </div>
</template>