# Bunifu Circle Progress ## Overview **Bunifu Circle Progress** is a .NET control curated beautifully to visualize progress information of activities within your application. It gives you the flexibility to have an elegant appearance by presenting you with great properties that will provide visually compelling ways to showcase a single statistic. Here's an illustration whereby Bunifu Circle Progress has been used into showing statistics of weather temperature changes at different times of the day: ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MfnSrdkMnGtoBsjOVnJ%2F-Mfo8eW3h2Z72qVL650X%2Fcp01.gif?alt=media\&token=bb4bca7a-5e35-4d73-a257-0748863801ab) ## Getting Started ### **Adding BunifuCircleProgress during design time** It's easy to add Bunifu Circle Progress control at design time. Start by locating Bunifu Circle Progress from your toolbox and simply drag it to your form as shown below then customize it to your desired look and feel using properties that will be elaborated on later in this documentation. ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MdbKwDPuazOOb-SDze2%2F-MdcRS0ROIiwJisH-aqc%2Fcp02.gif?alt=media\&token=c79da855-7bc5-4dc3-a750-418df548418a) ### **Adding Bunifu Circle Progress at run time** Bunifu Circle Progress works for both C# and [VB.NET.](http://vb.net/) We will use the Form’s Load event to write our sample code that will create and add the circle progress control with a value to our Form . {% tabs %} {% tab title="C#" %} ```csharp using Bunifu.UI.WinForms; using System; using System.Drawing; using System.Windows.Forms; namespace Example { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void Form1_Load(object sender, EventArgs e) { BunifuCircleProgress bunifuCircleProgress = new BunifuCircleProgress(); //set the value for the progress circle control bunifuCircleProgress.ValueByTransition = 26; //set the value to be displayed as a percentage bunifuCircleProgress.IsPercentage = true; //set the animation to false unless it is in an indeterminate state bunifuCircleProgress.Animated =false; //set the control's location in the form bunifuCircleProgress.Location = new Point(300, 100); this.Controls.Add(bunifuCircleProgress); } } } ``` {% endtab %} {% tab title="VB.NET" %} ```erlang Imports Bunifu.UI.WinForms Imports System Imports System.Drawing Imports System.Windows.Forms Namespace Example Partial Public Class Form1 Inherits Form Public Sub New() InitializeComponent() End Sub Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) Dim bunifuCircleProgress As New BunifuCircleProgress() 'set the value for the progress circle control bunifuCircleProgress.ValueByTransition = 26 'set the value to be displayed as a percentage bunifuCircleProgress.IsPercentage = True 'set the animation to false unless it is in an indeterminate state bunifuCircleProgress.Animated =False 'set the control's location in the form bunifuCircleProgress.Location = New Point(300, 100) Me.Controls.Add(bunifuCircleProgress) End Sub End Class End Namespace ``` {% endtab %} {% endtabs %} Using the timer component you can adjust the value dynamically in order to display the real-time value of the progress. Here's how to do it: {% tabs %} {% tab title="C#" %} ```csharp using Bunifu.UI.WinForms; using System; using System.Drawing; using System.Windows.Forms; namespace Bunifu_Circle { public partial class Form1 : Form { public Form1() { InitializeComponent(); } BunifuCircleProgress bunifuCircleProgress = new BunifuCircleProgress(); Timer timer = new Timer(); int progress_value = 0; private void Form1_Load(object sender, EventArgs e) { bunifuCircleProgress.IsPercentage = true; bunifuCircleProgress.Animated =false; bunifuCircleProgress.ValueByTransition = 0; bunifuCircleProgress.Location = new Point(300, 100); //set the timer properties and its timer tick event timer.Enabled = true; timer.Interval = 100; timer.Tick += Timer_Tick; this.Controls.Add(bunifuCircleProgress); this.components.Add(timer); } private void Timer_Tick(object sender, EventArgs e) { if (progress_value < 57) { bunifuCircleProgress.ValueByTransition = progress_value; progress_value += 1; } else { timer.Enabled = false; } } ``` {% endtab %} {% tab title="VB.NET" %} ```erlang Imports Bunifu.UI.WinForms Imports System Imports System.Drawing Imports System.Windows.Forms Namespace Bunifu_Circle Partial Public Class Form1 Inherits Form Public Sub New() InitializeComponent() End Sub Private bunifuCircleProgress As New BunifuCircleProgress() Private timer As New Timer() Private progress_value As Integer = 0 Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) bunifuCircleProgress.IsPercentage = True bunifuCircleProgress.Animated =False bunifuCircleProgress.ValueByTransition = 0 bunifuCircleProgress.Location = New Point(300, 100) 'set the timer properties and its timer tick event timer.Enabled = True timer.Interval = 100 AddHandler timer.Tick, AddressOf Timer_Tick Me.Controls.Add(bunifuCircleProgress) Me.components.Add(timer) End Sub Private Sub Timer_Tick(ByVal sender As Object, ByVal e As EventArgs) If progress_value < 57 Then bunifuCircleProgress.ValueByTransition = progress_value progress_value += 1 Else timer.Enabled = False End If End Sub ``` {% endtab %} {% endtabs %} {% hint style="success" %} Let's take a deep dive and get insights into the properties that are available on Bunifu Circle Progress. {% endhint %} ## **Circle Properties** ### `1. CircleMargin` This property allows you to get the property's integer value or set an integer value that will define the control's radius(i.e. the distance from the center of the circle to its circular boundary). When an integer value is increased, the radius is decreased, whereas when the integer value is decreased, the radius is increased. ### `2. LineThickness (Track Line Thickness)` This property allows you to get the property's integer value or set an integer value that will define the width of the circle's boundary line. By increasing the integer value, the track becomes thicker; by decreasing the integer value, the track becomes narrower. ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Me0i1yCJMfHO_ZlhJv1%2F-Me1RstNubStlpPYFaZb%2Fcircle07.gif?alt=media\&token=a5025aaf-4137-40e2-9296-ac5a6683f7db) ## **Progress Properties** ### `1. LineProgressThickness` This property allows you to get the property's integer value or set an integer value that defines the width of the progress line indicator. The line becomes thicker as the integer value increases; the line becomes narrower as the integer value decreases. ### `2. ProgressBackColor( the track color)` This property allows you to get the property's color value or set a color value for the progress track. It supports use of both HEX and RGB colors. ### `3. ProgressColor (the line indicator)` This property allows you to get the property's color value or set the progress line indicator's color value. It supports the use of both HEX and RGB colors. ### `4. ProgressEndCap` This property allows you to get the property's **end** cap style or set a frame style for the line indicator's endpoint. There are four enumerated values: `Flat`, `Arrow`, `Round`, and `Triangle`, with the `Round` style being the default. ### `5. ProgressStartCap` This property allows you to get the property's **start** cap style or set a frame style for the line indicator's **start** point. There are four enumerated values: `Flat`, `Arrow`, `Round`, and `Triangle`, with the `Round` style being the default. ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Me23StjxtAkg156_lZQ%2F-Me2I9GCb1UyDYA24Xwr%2Fcircle13.gif?alt=media\&token=c7b85ad8-7798-490c-b342-c9c5cf569c36) ### `6. ProgressFillStyle` This property allows you to get the property's fill style or set the fill style of the progress color. There are two enumerated values available: `Solid` and `Gradient` with the default value set to `Solid`. {% hint style="info" %} Gradient shows the change in intensity of the colors during the progress. To apply a gradient color to the progress line, ensure you have set `ProgressFillStyle` prop to **gradient** and set both the **`ProgressColor`** and**`ProgressColor2`** properties with your preferred color values. {% endhint %} ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mfo8sXViusPKw0GTh9h%2F-Mfo9d7aDJen1X_-i8Ro%2Fcp02.gif?alt=media\&token=842acce5-fac2-470f-b582-3e851dc4987d) ## **Animation Properties** ### `1. Animated` This property allows you to get the property's bool value or set a boolean value, which when set to true, causes the progress line to revolve around the circle track. Its speed is completely adjustable. {% hint style="info" %} This can be used to depict the circle's progress in an ambiguous manner when progress cannot be approximated or quantified. It can be used in conjunction with a determinate mode to notify users that the app is estimating progress prior to initiating actual progress. {% endhint %} ### `2. AnimationSpeed` This property allows you to get the property's elapsed time in milliseconds or set time milliseconds determines the duration that the line indicator will take to transition to the next interval (step) of progress. {% hint style="info" %} Increase the milliseconds to decelerate the speed of transitioning between intervals; decrease the milliseconds to accelerate the speed of transitioning between intervals. {% endhint %} ### `3. AnimationInterval` This is a nifty property that allows you to get the property's integer value(i.e the interval step) or set an integer value which will determine the steps that the line indicator will take to transition within a circle track. {% hint style="info" %} A value of 0 causes the animation to halt because the line indicator will not take any steps during the transition. Increase the integer value to make fewer steps, which accelerates the revolving pace; reduce it to create more steps, which slows the revolving speed. {% endhint %} ## **Text, Value & Font Properties** ### `1. Value` This property allows you to get the property's integer value or set an integer value that will define the progress information. {% hint style="info" %} If you want to set the value programmatically use the **`ValueByTransition`** property to set the value of progress. {% endhint %} ### `2. Font` This property allows you to get the property's font settings or set font settings that will be applied on the progress value text displayed at the center of the control. ### `3. SuperScriptText` This property allows you to get the property's string value or set a string value that indicates a numerical unit or the notation for the progress value. {% hint style="info" %} The property can be set to null (programmatically) or left blank (in design view) if there isn't any relevance in displaying the numerical unit of progress value displayed. {% endhint %} ### `4. SubScriptText` This property allows you to get the property's subscript text or set a text value such as number or letter values that can show an extension of information about the progress value. {% hint style="info" %} For instance, if the progress value contains decimals, you can convert it to a string and then use the Substring method to extract the decimal portion of the number. The resultant string can then be assigned to the SubScriptText. {% endhint %} ### `5. SecondaryFont` This property allows you to get the property's font settings or set font settings that will be applied on both the subscript and superscript text values. ### `6. SubScriptColor` This property allows you to get the property's subscript text color, or set a color value for the subscript text. It can support the use of both HEX and RGB color values. ### `7. SuperScriptColor` This property allows you to get the property's subscript text color, or set a color value for the superscript text. It can support the use of both HEX and RGB color values. ### `8. SuperScriptMargin` This property allows you to get the property's margin integer value or set a marginal integer value that will determine the space around the superscript text within the control. ### `9. ValueMargin` This property allows you to get the property's margin integer value or set a marginal integer value that will define the location and spacing of the progress value within the bounds of the control. ## Bunifu Circle Progress Events ### `1. ProgressValueChanged` This event is raised whenever the **`Value`** property set to a value that is different than the current value, which may have reduced or increased. \ Take Away --------- Bunifu Circle Progress is a staple of WinForms app development. It’s one of those little minor details that can immensely impact a user’s experience and flow. We hope you will enjoy Bunifu Circle Progress and that it will help you create a better user experience for your users. Should you have feedback or suggestions please send us via chat on the bottom right corner of the screen.