Create Circular Progress Bar Dynamically In ASP.NET

In this blog, we will see how we can create a circular progress bar in ASP.NET just by applying style.

Thus, let's go.

Let's take an example that we need to show the active users on a circular progress bar. For it, we will take a div and apply style to make it circular.

<div id="circularProgess" class="circularprogress background" runat="server">
<div id="ProgressText" class="overlay" runat="server"></div>
</div>

Add the style, mentioned below.

<style>
.background {
background-image: linear-gradient(<%= Val1 %>, <%= ColorCode %> 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(<%= Val2 %>, #AC2D36 50%, #ffffff 50%, #ffffff);
}
/* -------------------------------------
* Bar container
* ------------------------------------- */
.circularprogress {
float: left;
margin-left: 50px;
margin-top: 30px;
position: relative;
width: 180px;
height: 180px;
border-radius: 50%;
}
/* -------------------------------------
* Optional centered circle w/text
* ------------------------------------- */
.circularprogress .overlay {
position: absolute;
width: 130px;
height: 110px;
color: white;
background-color: #CF5760;
border-radius: 50%;
margin-left: 25px;
margin-top: 23px;
text-align: center;
line-height: 90px;
font-size: 35px;
padding-top: 20px;
}
</style>

In the background style, I have added val1 and val2, where I will assign from .cs page, so we can make a dynamic circular progress bar. Add the properties and methods, mentioned below in .cs file.

private string val1 = "90deg";
public string Val1
{
get { return val1; }
set { val1 = value; }
}
private string val2 = "90deg";
public string Val2
{
get { return val2; }
set { val2 = value; }
}
private string colorCode = "#ffffff";
public string ColorCode
{
get { return colorCode; }
set { colorCode = value; }
}
protected void Page_Load(object sender, EventArgs e)
{
ProgressText.InnerText = "0%";
CalculateActiveUsersAngle(75);
}
private void CalculateActiveUsersAngle(int TotalUser)
{
//int TotalUser = 50;
if (TotalUser == 0)
{
Val2 = "90deg";
Val1 = "90deg";
ColorCode = "#ffffff";
}
else if (TotalUser < 50 && TotalUser > 0)
{
double percentageOfWholeAngle = 360 * (Convert.ToDouble(TotalUser) / 100);
Val2 = (90 + percentageOfWholeAngle).ToString() + "deg";
Val1 = "90deg";
ColorCode = "#ffffff";
}
else if (TotalUser > 50 && TotalUser < 100)
{
double percentage = 360 * (Convert.ToDouble(TotalUser) / 100);
Val1 = (percentage - 270).ToString() + "deg";
Val2 = "270deg";
ColorCode = "#AC2D36";
}
else if (TotalUser == 50)
{
Val1 = "-90deg";
Val2 = "270deg";
ColorCode = "#AC2D36";
}
else if (TotalUser >= 100)
{
Val1 = "90deg";
Val2 = "270deg";
ColorCode = "#AC2D36";
}
ProgressText.InnerText = TotalUser + "%";
}

CalculateActiveUsersAngle() method will calculate and show the exact angle .You can assign the angle if you want to CalculateActiveUsersAngle() method. For this example, I have assigned 75, so circular progress will display 75% on the radial. It will display, as shown below.

Hope you understood and enjoyed.