December 21, 2016 08:20 by
PeterIn this post, let me explain you about Create Circular Progress Bar Dynamically In ASP.NET. 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. And here is the output:
European best, cheap and reliable ASP.NET hosting with instant activation. HostForLIFE.eu is #1 Recommended Windows and ASP.NET hosting in European Continent. With 99.99% Uptime Guaranteed of Relibility, Stability and Performace. HostForLIFE.eu security team is constantly monitoring the entire network for unusual behaviour. We deliver hosting solution including Shared hosting, Cloud hosting, Reseller hosting, Dedicated Servers, and IT as Service for companies of all size.
