Name: Control.MauiCircularProgressView.Net
Author: James Esil Holder

Control.MauiCircularProgressView.Net v1.0.0 — nugetz

Install-Package Maui.CircularProgress.Net

dotnet add package Maui.CircularProgress.Net

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:Maui.CircularProgress.Net.Controls;assembly=Maui.CircularProgress.Net"
             x:Class="YourApp.MainPage">
    
    <!-- Your content here -->
    
</ContentPage>

<controls:CircularProgressBar
    Progress="75"
    MaxProgress="100"
    ProgressColor="Green"
    ProgressLeftColor="LightGreen"
    Size="140"
    TextColor="DarkGreen"
    Thickness="10"
    ShowText="True"
    ProgressEdgeShape="Round"
    Shape="Circular" />

Property	Type	Default	Description
`Progress`	int	0	Current progress value
`MaxProgress`	int	100	Maximum progress value
`Size`	int	100	Diameter of the circle (or width for flat bars)
`Thickness`	int	10	Thickness of the progress ring/bar
`ProgressColor`	Color	Blue	Color of the completed progress
`ProgressLeftColor`	Color	LightGray	Color of the remaining progress
`TextColor`	Color	Black	Color of the progress text
`ShowText`	bool	true	Show or hide the progress text
`ProgressEdgeShape`	LineCap	Butt	Edge style: `Butt` (flat) or `Round` (rounded)
`Shape`	ProgressBarShape	Circular	Shape: `Circular`, `Arch`, or `Flat`

<controls:CircularProgressBar
    Progress="65"
    Shape="Circular"
    ProgressColor="#6B4EFF"
    ProgressLeftColor="#E0E7FF"
    Size="150"
    Thickness="12"
    ProgressEdgeShape="Round" />

<controls:CircularProgressBar
    Progress="45"
    Shape="Arch"
    ProgressColor="#FB923C"
    ProgressLeftColor="#FED7AA"
    Size="150"
    Thickness="13"
    ProgressEdgeShape="Round" />

<controls:CircularProgressBar
    Progress="80"
    Shape="Flat"
    ProgressColor="#10B981"
    ProgressLeftColor="#D1FAE5"
    Size="200"
    Thickness="20" />

<controls:CircularProgressBar
    Progress="75"
    ProgressColor="#3B82F6"
    ProgressLeftColor="#DBEAFE"
    Size="120"
    Thickness="10"
    ProgressEdgeShape="Round" />

<controls:CircularProgressBar
    Progress="250"
    MaxProgress="500"
    ProgressColor="#8B5CF6"
    ProgressLeftColor="#EDE9FE"
    Size="140"
    Thickness="12" />

<controls:CircularProgressBar
    Progress="90"
    ShowText="False"
    ProgressColor="#EF4444"
    ProgressLeftColor="#FEE2E2"
    Size="100"
    Thickness="8" />

<Grid WidthRequest="200" HeightRequest="200">
    
    <!-- Outer Circle - Category 1 -->
    <controls:CircularProgressBar
        Progress="9700"
        MaxProgress="15000"
        ProgressColor="#6B4EFF"
        ProgressLeftColor="#EDD9FA"
        Size="200"
        Thickness="25"
        ShowText="False"
        ProgressEdgeShape="Round"
        HorizontalOptions="Center"
        VerticalOptions="Center" />
    
    <!-- Inner Circle - Category 2 -->
    <controls:CircularProgressBar
        Progress="5300"
        MaxProgress="15000"
        ProgressColor="#FB923C"
        ProgressLeftColor="#FCC99F"
        Size="150"
        Thickness="20"
        ShowText="False"
        ProgressEdgeShape="Round"
        HorizontalOptions="Center"
        VerticalOptions="Center" />
    
    <!-- Center Label -->
    <VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center">
        <Label Text="Total" FontSize="12" HorizontalTextAlignment="Center" />
        <Label Text="15000" FontSize="18" FontAttributes="Bold" HorizontalTextAlignment="Center" />
    </VerticalStackLayout>
    
</Grid>

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class DashboardViewModel : INotifyPropertyChanged
{
    private int _currentProgress = 65;
    private int _maxProgress = 100;

    public int CurrentProgress
    {
        get => _currentProgress;
        set
        {
            _currentProgress = value;
            OnPropertyChanged();
        }
    }

    public int MaxProgress
    {
        get => _maxProgress;
        set
        {
            _maxProgress = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

<controls:CircularProgressBar
    Progress="{Binding CurrentProgress}"
    MaxProgress="{Binding MaxProgress}"
    ProgressColor="#10B981"
    ProgressLeftColor="#D1FAE5"
    Size="150"
    Thickness="12" />

<controls:CircularProgressBar
    Progress="85"
    ProgressColor="#10B981"
    ProgressLeftColor="#D1FAE5"
    TextColor="#065F46" />

<controls:CircularProgressBar
    Progress="60"
    ProgressColor="#F59E0B"
    ProgressLeftColor="#FEF3C7"
    TextColor="#92400E" />

<controls:CircularProgressBar
    Progress="30"
    ProgressColor="#EF4444"
    ProgressLeftColor="#FEE2E2"
    TextColor="#991B1B" />

<controls:CircularProgressBar
    Progress="50"
    ProgressColor="#3B82F6"
    ProgressLeftColor="#DBEAFE"
    TextColor="#1E40AF" />

public async Task AnimateProgress()
{
    for (int i = 0; i <= 100; i += 5)
    {
        MyProgressBar.Progress = i;
        await Task.Delay(50); // 50ms delay
    }
}

public void UpdateProgressColor(int progress)
{
    if (progress < 30)
        MyProgressBar.ProgressColor = Colors.Red;
    else if (progress < 70)
        MyProgressBar.ProgressColor = Colors.Orange;
    else
        MyProgressBar.ProgressColor = Colors.Green;
}

Platform	Minimum Version	Status
iOS	15.0	✅ Supported
Android	21 (5.0 Lollipop)	✅ Supported
Windows	10.0.17763.0	✅ Supported
macOS (Catalyst)	15.0	✅ Supported

Jay-E/Control.MauiCircularProgressView.Netv1.0.0

Get Started

Readme

Circular Progress Bar for .NET MAUI

Icon

Banner

✨ Features

📦 Installation

Package Manager Console

.NET CLI

Visual Studio

🚀 Quick Start

1. Add Namespace to XAML

2. Use the Control

📚 Properties Reference

🎨 Shape Options

Circular (360° Full Circle)

Arch (180° Semi-Circle)

Flat (Horizontal Bar)

💡 Common Use Cases

Basic Percentage Progress

Custom Range Progress

Progress Without Text

Multi-Layer Donut Chart

🔗 Data Binding with MVVM

ViewModel

XAML

🎨 Pre-built Color Themes

Success Theme (Green)

Warning Theme (Orange)

Danger Theme (Red)

Info Theme (Blue)

📱 Platform Support

🔧 Advanced Features

Dynamic Progress Updates

Conditional Color Changes

📖 Documentation

🐛 Troubleshooting

Progress bar not visible

Text not displaying

Colors not applying

🤝 Contributing

🙏 Acknowledgments

⭐ Show Your Support

📊 Stats