# Progress

*Show task completion status with customizable progress bars that support dynamic updates and multiple [color variants](../../01_Onboarding/02_Concepts/12_Theming.md).*

The `Progress` [widget](../../01_Onboarding/02_Concepts/03_Widgets.md) is used to visually represent the completion status of a task or process. It displays a visual progress bar that can be customized with different color variants and can be bound to [state](../../03_Hooks/02_Core/03_UseState.md) for dynamic updates.

## Example

```csharp
public class ProgressDemo : ViewBase
{
    public override object? Build()
    {
        var progress = UseState(25);

        return Layout.Vertical(
            new Progress(progress.Value).Goal($"{progress.Value}% Complete"),
            Layout.Horizontal(
                new Button("0%", _ => progress.Set(0)),
                new Button("25%", _ => progress.Set(25)),
                new Button("50%", _ => progress.Set(50)),
                new Button("75%", _ => progress.Set(75)),
                new Button("100%", _ => progress.Set(100))
            )
        );
    }
}
```


## API

[View Source: Progress.cs](https://github.com/Ivy-Interactive/Ivy-Framework/blob/main/src/Ivy/Widgets/Progress.cs)

### Constructors

| Signature |
|-----------|
| `new Progress(IState<int> state)` |
| `new Progress(int? value = 0)` |


### Properties

| Name | Type | Setters |
|------|------|---------|
| `ColorVariant` | `ColorVariants` | `ColorVariant` |
| `Goal` | `string` | `Goal` |
| `Height` | `Size` | - |
| `Scale` | `Scale?` | - |
| `Value` | `int?` | `Value` |
| `Visible` | `bool` | - |
| `Width` | `Size` | - |