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.