Post
Ask Question

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. 
  1. <div id="circularProgess" class="circularprogress background" runat="server">  
  2.           <div id="ProgressText" class="overlay" runat="server"></div>  
  3. </div>  
Add the style, mentioned below.
  1. <style>  
  2.     .background {  
  3.         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);  
  4.     }  
  5.   
  6.     /* ------------------------------------- 
  7.      * Bar container 
  8.      * ------------------------------------- */  
  9.     .circularprogress {  
  10.         float: left;  
  11.         margin-left: 50px;  
  12.         margin-top: 30px;  
  13.         position: relative;  
  14.         width: 180px;  
  15.         height: 180px;  
  16.         border-radius: 50%;  
  17.     }  
  18.   
  19.         /* ------------------------------------- 
  20.          * Optional centered circle w/text 
  21.          * ------------------------------------- */  
  22.         .circularprogress .overlay {  
  23.             position: absolute;  
  24.             width: 130px;  
  25.             height: 110px;  
  26.             color: white;  
  27.             background-color: #CF5760;  
  28.             border-radius: 50%;  
  29.             margin-left: 25px;  
  30.             margin-top: 23px;  
  31.             text-align: center;  
  32.             line-height: 90px;  
  33.             font-size: 35px;  
  34.             padding-top: 20px;  
  35.         }  
  36. </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.
  1. private string val1 = "90deg";  
  2.   
  3.        public string Val1  
  4.        {  
  5.            get { return val1; }  
  6.            set { val1 = value; }  
  7.        }  
  8.   
  9.        private string val2 = "90deg";  
  10.   
  11.        public string Val2  
  12.        {  
  13.            get { return val2; }  
  14.            set { val2 = value; }  
  15.        }  
  16.   
  17.        private string colorCode = "#ffffff";  
  18.   
  19.        public string ColorCode  
  20.        {  
  21.            get { return colorCode; }  
  22.            set { colorCode = value; }  
  23.        }  
  24.   
  25.        protected void Page_Load(object sender, EventArgs e)  
  26.        {  
  27.            ProgressText.InnerText = "0%";  
  28.            CalculateActiveUsersAngle(75);  
  29.        }  
  30.   
  31.        private void CalculateActiveUsersAngle(int TotalUser)  
  32.        {  
  33.            //int TotalUser = 50;  
  34.   
  35.            if (TotalUser == 0)  
  36.            {  
  37.                Val2 = "90deg";  
  38.                Val1 = "90deg";  
  39.                ColorCode = "#ffffff";  
  40.            }  
  41.            else if (TotalUser < 50 && TotalUser > 0)  
  42.            {  
  43.                double percentageOfWholeAngle = 360 * (Convert.ToDouble(TotalUser) / 100);  
  44.                Val2 = (90 + percentageOfWholeAngle).ToString() + "deg";  
  45.                Val1 = "90deg";  
  46.                ColorCode = "#ffffff";  
  47.            }  
  48.            else if (TotalUser > 50 && TotalUser < 100)  
  49.            {  
  50.                double percentage = 360 * (Convert.ToDouble(TotalUser) / 100);  
  51.                Val1 = (percentage - 270).ToString() + "deg";  
  52.                Val2 = "270deg";  
  53.                ColorCode = "#AC2D36";  
  54.            }  
  55.            else if (TotalUser == 50)  
  56.            {  
  57.                Val1 = "-90deg";  
  58.                Val2 = "270deg";  
  59.                ColorCode = "#AC2D36";  
  60.            }  
  61.            else if (TotalUser >= 100)  
  62.            {  
  63.                Val1 = "90deg";  
  64.                Val2 = "270deg";  
  65.                ColorCode = "#AC2D36";  
  66.            }  
  67.   
  68.            ProgressText.InnerText = TotalUser + "%";  
  69.   
  70.        }  
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.