Progress Circle

Preview

Usage

<script lang="ts">
  import { ProgressCircle, themeConfig } from "@dxdns/feflow"

  const { colors } = $derived(themeConfig())

  function getColor(value: number) {
    if (value < 30) return colors.colorError
    if (value < 70) return colors.colorWarning
    return colors.colorSuccess
  }

  const data = [20, 45, 75, 90].map((v) => ({ value: v, color: getColor(v) }))
</script>

<div
  style="
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: baseline;
    "
>
  {#each data as { value, color }}
    <ProgressCircle {value} {color}>
      <text
        x={"28px"}
        y={"52px"}
        fill={color}
        style="font-weight: bold; font-size: 18px;"
      >
        {value}%
      </text>
    </ProgressCircle>
  {/each}
</div>