The ProgressCircle component is a circular visual indicator used to display progress, loading states, or completion percentages in a compact format.

• Circular visualization: Displays progress as a proportion of a circle.
• Customizable color: Supports dynamic or theme-based colors.
• Labeling support: Can include text or percentages inside the circle.
• Compact and responsive: Ideal for dashboards, charts, or small UI areas.
• Composable: Works in groups or standalone.

Usage Example

Preview

Code

<script lang="ts">
  import { ProgressCircle, themeConfig } from "@fefade-ui/svelte"

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

  function getColor(value: number) {
    if (value < 30) return colors.onError
    if (value < 70) return colors.onWarning
    return colors.onSuccess
  }

  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;
  justify-content: center;
    "
>
  {#each data as { value, color } (`${value}-${color}`)}
    <ProgressCircle {value} {color}>
      <text
        x="28px"
        y="52px"
        fill={color}
        style="font-weight: bold; font-size: 18px;"
      >
        {value}%
      </text>
    </ProgressCircle>
  {/each}
</div>

Props

Prop	Type	Default	Description
value	number	0	The progress value (0–100) to display.
color	string	—	Color of the progress stroke. Can be theme-based or custom.
class	string	—	Optional CSS classes for styling.
style	string	—	Inline style overrides.

Best Practices

• Use value in the range of 0–100 for proper visualization.
• Combine with text or labels to clearly indicate the metric.
• Use contrasting colors for better readability.
• Group multiple ProgressCircle components for comparative displays.
• Avoid overly small circles that obscure numeric labels.