# ProgressCircle

The ProgressCircle component is entirely implemented on the server side as a derived class of [Wisej.Web.Canvas](https://docs.wisej.com/api/wisej.web/content/canvas). It draws on a HTML5 canvas element on the client directly from the server in real time. The component lets you set value, line style and thickness, fill color, font, etc.

![](https://2248866391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFp7MR1wemvcC5891_r%2F-MMhBbn6PGRCHsLjV02g%2F-MMhFuzVHlQlSKwZK24Y%2Fimage.png?alt=media\&token=4bc6a2f0-879b-4e09-b132-51d735c291fa)

{% embed url="<https://github.com/iceteagroup/wisej-extensions/tree/master/Wisej.Web.Ext.ProgressCircle>" %}
ProgressCircle Source Code
{% endembed %}

## Code Example

```csharp
ProgressCircle progressCircle1 = new ProgressCircle();
progressCircle1.Value = 60;
progressCircle1.LineCap = CanvasLineCap.Round;
progressCircle1.LineWidth = 10;
progressCircle1.ForeColor = System.Drawing.Color.Blue;
progressCircle1.BackColor = System.Drawing.Color.Green;
progressCircle1.FillCircle = true;
this.Controls.Add(progressCircle1);
```

This code snippet will produce a ProgressCircle that looks like the one below. *Value* is an integer between 1 and 100 and it is how far the circle is filled going around. *Value* also appears as a number in the middle (Note this can be toggled with *ShowValue*). *LineCap* is set to Round which is why the ends of the blue line are round. *LineWidth* controls the thickness of the line and is set to 10. *ForeColor* is set to Blue, which is why the circle is blue as well as the 60% value in the middle. *BackColor* is set to green.  Just setting *BackColor* to green does not do anything- you also need *FillCircle* to be true. *BackColor* controls the color that the circle will be filled with.

<figure><img src="https://2248866391-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MFp7MR1wemvcC5891_r%2Fuploads%2F2rDhsZy0ipK7DQleardB%2Fprogresscircle.png?alt=media&#x26;token=40dfeb0f-4f92-4f66-a1a7-687ee8948eaa" alt=""><figcaption></figcaption></figure>

## How to Use

The **ProgressCircle** extension can be added to a Wisej.NET project using NuGet Package Manager.

{% embed url="<https://www.nuget.org/packages/Wisej-3-ProgressCircle>" %}

Set the style of your [ProgressCircle ](https://docs.wisej.com/extensions/extensions/progresscircle/api/wisej.web.ext.progresscircle.progresscircle)in [*LineCap* ](https://docs.wisej.com/extensions/extensions/api/wisej.web.ext.progresscircle.progresscircle#linecap)and the width in [*LineWidth*](https://docs.wisej.com/extensions/extensions/api/wisej.web.ext.progresscircle.progresscircle#linewidth).\
Furthermore decide with [*FillCircle* ](https://docs.wisej.com/extensions/extensions/api/wisej.web.ext.progresscircle.progresscircle#fillcircle)if the circle is filled with the background color and [*ShowValue* ](https://docs.wisej.com/extensions/extensions/api/wisej.web.ext.progresscircle.progresscircle#showvalue)whether text is displayed in the middle of the circle.

{% hint style="info" %}
Find more information in our [Blog](https://wisej.com/blog/progress/) or [Example](https://app.gitbook.com/@iceteagroup/s/examples/~/drafts/-MMhFe5lregyWQPhg68n/tutorials/progresscircle).
{% endhint %}