Easily Track the Progress of Your Work Using the New .NET MAUI ProgressBar
Tags: csharp, dotnet, maui, mobile
Published: 2022-10-26 04:56:55

---
title: Easily Track the Progress of Your Work Using the New .NET MAUI ProgressBar
published: true
date: 2022-10-20 11:48:04 UTC
tags: csharp, dotnet, maui, mobile
canonical_url: https://www.syncfusion.com/blogs/post/easily-track-the-progress-of-your-work-using-dotnet-maui-progressbar.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/feah1t9fieblxdgjr4mj.png
---

To elegantly visualize the progression of tasks, you need a groundbreaking progress bar! In that regard, our new [.NET MAUI ProgressBar](https://www.syncfusion.com/maui-controls/maui-progressbar ".NET MAUI ProgressBar") satisfies your needs. This control is available in our [Essential Studio 2022 Volume 3](https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download "Essential Studio 2022 Volume 3 Release") release.

The new .NET MAUI ProgressBar is a feature-rich notification control. It allows you to visualize the progress of work or an operation. In real-time scenarios, you can use this control to show the status of ongoing processes, such as loading an app, transferring a file, downloading, installation, data loading and recovery, and saving updates.

We have included two forms of the ProgressBar control in our .NET MAUI platform.

- [Linear ProgressBar](https://help.syncfusion.com/maui/linearprogressbar/overview ".NET MAUI Linear ProgressBar overview ")
- [Circular ProgressBar](https://help.syncfusion.com/maui/circularprogressbar/overview ".NET MAUI Circular ProgressBar overview")

## Linear ProgressBar

The .NET MAUI Linear ProgressBar, or progress indicator, is a type of graphical control that helps visualize the progress of any work or operation in a rectangular track.

### Key features

#### Determinate state

A determinate progress bar is mainly used when progression can be estimated. It shows the total amount of progress and how long it has left to go.

For example, you can use the determinate progress indicator to show the progress of a file downloading. The progress color and percentage are used to indicate the download completion and the remaining progress.

#### Indeterminate state

An indeterminate progress bar is mainly used when it is impossible to predict or calculate progression. It will show continuous animation without indicating how much progress remains.

For example, you can use this indicator type for something waiting for a response, like retrieving online data from a server.

#### Buffer state

A buffer-type progress indicator plays dual roles: secondary progress indicates an activity or loading, while primary progress indicates the current progress position.

For example, while streaming videos, we can use this type of progress bar to show both the streaming progress (in the background) and the current video play position.

#### Segmented progress

We can use the segment progress bar to split progress visualization into different segments. Both the segments’ gaps and counts are customizable. This helps avoid writing several lines of code to create and position multiple progress bars.

#### Range colors

The range colors allow users to easily differentiate the various statuses of a work in progress and enhance the look and feel for better communication.

For example, during online food ordering, placing an order may start the bar with a red color; as the order progresses, it turns orange; upon completion, it turns yellow; and finally, it turns green with a delivered status.

#### Track customization

The track color (background) is used to differentiate the progress indication from the track and you can also customize the track thickness to make the UI more approachable.

#### Corner radius

You can easily customize the corner radius of the ProgressBar to view the control with a rounded or sharp edge.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/NET-MAUI-Linear-ProgressBar-1.png" alt=".NET MAUI Linear ProgressBar" style="width:100%">

  <figcaption>.NET MAUI Linear ProgressBar</figcaption>

</figure>

## Circular ProgressBar

The .NET MAUI Circular ProgressBar, or progress indicator, is a type of graphical control that visualizes the progress of any work or operation in a round or semicircle track.

Similar to the Linear ProgressBar, you can also enjoy the following features in the Circular ProgressBar:

- Determinate and indeterminate states
- Range colors
- Segmented progress
- Track customization
- Corner radius

Let’s see the other unique features of the Circular ProgressBar.

### Custom content

Add any view to the center of the Circular ProgressBar as content to indicate the completion of a task or process. You can add start, pause, or cancel buttons as content to control the progress interactively; add an image that indicates the actual task in progress; and add custom text that conveys the progress unit.

### Radius and angles

Customize the start and end angles of the Circular ProgressBar to give it a unique style. Also, customize the radius of the circular track based on your application needs.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/NET-MAUI-Circular-ProgressBar-1.png" alt=".NET MAUI Circular ProgressBar" style="width:100%">

  <figcaption>.NET MAUI Circular ProgressBar</figcaption>

</figure>

## Add the .NET MAUI ProgressBar to your application

We have seen the key features of the .NET MAUI ProgressBar control. Let’s see how to create a simple .NET MAUI app with Linear ProgressBar and Circular ProgressBar to demonstrate their primary usage.

### Step 1: Create a .NET MAUI app.

First, [create a new .NET MAUI app](https://docs.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-android "Build your first .NET MAUI app documentation") in [Visual Studio](https://visualstudio.microsoft.com/ "Microsoft page for Visual Studio").

### Step 2: Install the NuGet packages.

Syncfusion .NET MAUI controls are available in the [NuGet Gallery](https://www.nuget.org/ "NuGet Gallery"). To add the ProgressBar control to your project, open the NuGet Package Manager in Visual Studio. Search for  **Syncfusion.Maui.ProgressBar**  and then install it.

### Step 3: Handler registration.

The [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core "Syncfusion.Maui.Core NuGet package") NuGet package is a dependent package for all our Syncfusion .NET MAUI controls. In the  **MauiProgram.cs**  file, register the handler for Syncfusion core using the  **ConfigureSyncfusionCore** () method.

Refer to the following code.

```csharp
using Syncfusion.Maui.Core.Hosting;
 
namespace ProgressBar;
 
public static class MauiProgram
{
  public static MauiApp CreateMauiApp()
  {
    var builder = MauiApp.CreateBuilder();
    builder
      .UseMauiApp<App>()
      .ConfigureSyncfusionCore()
      .ConfigureFonts(fonts =>
       {
         fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
         fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
       });
 
       return builder.Build();
  }
}
```

### Step 4: Import the namespace.

Then, import the control namespace  **Syncfusion.Maui.ProgressBar**  in your XAML or C# code.

```xml
xmlns:progressBar="clr-namespace:Syncfusion.Maui.ProgressBar;assembly=Syncfusion.Maui.ProgressBar"
```

### Step 5: Initialize the ProgressBar and set the progress value.

Now, initialize the **SfLinearProgressBar** or **SfCircularProgressBar** control along with the progress value based on your application needs.

**Linear ProgressBar:**

```xml
<progressBar:SfLinearProgressBar Progress="75"/>
```

![.NET MAUI Linear ProgressBar](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Linear-ProgressBar-1.png)

**Circular ProgressBar:**

```xml
<progressBar:SfCircularProgressBar Progress="75" />
```

![.NET MAUI Circular ProgressBar](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Circular-ProgressBar-1.png)

**Note:** By default, the value of progress should be specified between 0 and 100. To render the progress value between 0 and 1, set the [Minimum](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ProgressBar.ProgressBarBase.html#Syncfusion_Maui_ProgressBar_ProgressBarBase_Minimum "Minimum property of .NET MAUI ProgressBar") property to 0 and the [Maximum](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ProgressBar.ProgressBarBase.html#Syncfusion_Maui_ProgressBar_ProgressBarBase_Maximum "Maximum property of .NET MAUI ProgressBar") property to 1.

### Step 6: Enabling the indeterminate state.

You can enable the indeterminate state for the ProgressBar using the [IsIndeterminate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ProgressBar.ProgressBarBase.html?tabs=tabid-1#Syncfusion_Maui_ProgressBar_ProgressBarBase_IsIndeterminate "IsIndeterminate property of .NET MAUI ProgressBar") property, as in the following code example.

**Linear ProgressBar:**

```xml
<progressBar:SfLinearProgressBar IsIndeterminate="True"/>
```

![Indeterminate state in .NET MAUI Linear ProgressBar](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Indeterminate-state-in-Linear-ProgressBar.gif)

**Circular ProgressBar:**

```xml
<progressBar:SfCircularProgressBar IsIndeterminate="True" />
```

 

![Indeterminate state in .NET MAUI Circular ProgressBar](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Indeterminate-state-in-Circular-ProgressBar.gif)

## GitHub reference

For more information, refer to the [.NET MAUI ProgressBar Getting Started demo on GitHub](https://github.com/SyncfusionExamples/Getting-started-with-.NET-MAUI-ProgressBar- ".NET MAUI ProgressBar demos on GitHub").

## Conclusion

Thanks for reading! In this blog, we walked you through the new Syncfusion [.NET MAUI ProgressBar](https://www.syncfusion.com/maui-controls/maui-progressbar ".NET MAUI ProgressBar") control and its features available in the 2022 Volume 3 release. For more information, refer to its [user guide](https://help.syncfusion.com/maui/circularprogressbar/getting-started "Getting started with .NET MAUI Circular ProgressBar"). Use this control to elegantly visualize work in progress.

Leave your feedback in the comments section given below.

Refer to our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v20.3.0.47 "Syncfusion Release Notes") and the [What’s New](https://www.syncfusion.com/products/whatsnew "Syncfusion What’s New") pages to check the other updates in this release. Also, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion support forums"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms "Syncfusion feedback portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2022 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2022-volume-3-is-here.aspx "Blog: Syncfusion Essential Studio 2022 Volume 3 Is Here")
- [What’s New in .NET MAUI: 2022 Volume 3](https://www.syncfusion.com/blogs/post/whats-new-in-net-maui-2022-volume-3.aspx "Blog: What’s New in .NET MAUI: 2022 Volume 3")
- [Introducing the .NET MAUI Autocomplete Control](https://www.syncfusion.com/blogs/post/dotnet-maui-autocomplete-control.aspx "Blog: Introducing the .NET MAUI Autocomplete Control")
- [What’s New in .NET MAUI Charts: 2022 Volume 3](https://www.syncfusion.com/blogs/post/whats-new-in-net-maui-charts-2022-volume-3.aspx "Blog: What’s New in .NET MAUI Charts: 2022 Volume 3")