# Syncfusion Wpf Circular Progressbar

> Implement Syncfusion WPF SfCircularProgressBar for circular and radial progress indicators. Use this when building circular progress displays, determinate or indeterminate progress animations, buffer/secondary progress, segmented progress rings, or arc-shaped progress with custom center content. Covers RangeColors, StartAngle, EndAngle, SegmentCount, and ProgressContent using Syncfusion.SfProgressBar.WPF.

- Skill: `syncfusion/syncfusion-wpf-circular-progressbar` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add syncfusion/syncfusion-wpf-circular-progressbar`
- Raw SKILL.md: https://api.skillmd.com/api/skills/syncfusion/syncfusion-wpf-circular-progressbar/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: syncfusion (https://skillmd.com/u/syncfusion)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/syncfusion/syncfusion-wpf-circular-progressbar

---


# Implementing SfCircularProgressBar (WPF)

## When to Use This Skill

Use this skill when:
- Displaying circular/radial progress for a known task (determinate)
- Showing an indeterminate spinner while progress is unknown
- Visualizing primary + secondary (buffer) progress simultaneously
- Splitting progress into segments (e.g., steps in a workflow)
- Customizing arc angles (semi-circle, full circle, partial arc)
- Styling progress ring colors, gradients, or range-based colors
- Placing custom content (text, buttons, images) at the center of the ring

**Assembly:** `Syncfusion.SfProgressBar.WPF`
**Namespace:** `Syncfusion.UI.Xaml.ProgressBar`
**XAML Schema:** `http://schemas.syncfusion.com/wpf`
**Key Class:** `SfCircularProgressBar`

---

## Quick Start

```xaml
<Window
    xmlns:Syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        <!-- Determinate: shows 70% progress -->
        <Syncfusion:SfCircularProgressBar
            Progress="70"
            ShowProgressValue="True"
            Width="150" Height="150" />
    </Grid>
</Window>
```

```csharp
using Syncfusion.UI.Xaml.ProgressBar;

SfCircularProgressBar circular = new SfCircularProgressBar();
circular.Progress = 70;
circular.ShowProgressValue = true;
circular.Width = 150;
grid.Children.Add(circular);
```

---

## Documentation and Navigation Guide

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- NuGet/assembly installation (`Syncfusion.SfProgressBar.WPF`)
- XAML namespace and schema declaration
- Declaring the control in XAML and code-behind
- Setting the `Progress` property
- Theme integration via SfSkinManager

### States
📄 **Read:** [references/states.md](references/states.md)
- Determinate state (default) with `ShowProgressValue`
- Indeterminate state (`IsIndeterminate="True"`) for unknown progress
- Buffer state (`SecondaryProgress`, `SecondaryProgressColor`)
- Decision guide: which state to use when

### Appearance & Customization
📄 **Read:** [references/appearance.md](references/appearance.md)
- Arc shape via `StartAngle` / `EndAngle`
- Radius and thickness: `IndicatorOuterRadius`, `IndicatorInnerRadius`, `TrackOuterRadius`, `TrackInnerRadius`
- Solid color: `ProgressColor`, `TrackColor`
- Range-based colors: `RangeColor` with `Start`, `End`, `Color`
- Gradient effect: `RangeColor.IsGradient`
- Rounded ends: `IndicatorCornerRadius`
- Animation: `AnimationDuration`, `AnimationEasing`

### Segments & Custom Content
📄 **Read:** [references/segments-and-custom-content.md](references/segments-and-custom-content.md)
- `SegmentCount` to split ring into discrete steps
- `ProgressContent` for center UI (text, buttons, images)
- Binding center text to `Progress` value
- Play/Pause button with `DispatcherTimer` pattern

---

## Key Properties

| Property | Type | Default | Purpose |
|---|---|---|---|
| `Progress` | `double` | `0` | Current progress value (0–100) |
| `ShowProgressValue` | `bool` | `false` | Display numeric % in center |
| `IsIndeterminate` | `bool` | `false` | Indeterminate spinning animation |
| `SecondaryProgress` | `double` | `0` | Buffer/secondary progress value |
| `StartAngle` | `double` | `-90` | Arc start angle in degrees |
| `EndAngle` | `double` | `270` | Arc end angle in degrees |
| `SegmentCount` | `int` | `0` | Number of segments (0 = none) |
| `ProgressColor` | `Brush` | theme | Color of the progress arc |
| `TrackColor` | `Brush` | theme | Color of the track arc |
| `IndicatorCornerRadius` | `double` | `0` | Rounded ends on the progress arc |
| `AnimationDuration` | `TimeSpan` | `3000ms` | Indeterminate animation cycle time |
| `ProgressContent` | `object` | `null` | Custom center content |

---

## Common Use Cases

- **File upload indicator** — determinate with `ShowProgressValue="True"`
- **Loading spinner** — indeterminate (`IsIndeterminate="True"`)
- **Media player** — `ProgressContent` with play/pause button
- **Step tracker** — `SegmentCount` matching total steps
- **CPU/memory gauge** — `RangeColors` mapping green/yellow/red zones
- **Semi-circle gauge** — `StartAngle="180"` `EndAngle="360"`