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. }
  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. }
  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";
  3. public string Val1
  4. {
  5. get { return val1; }
  6. set { val1 = value; }
  7. }
  9. private string val2 = "90deg";
  11. public string Val2
  12. {
  13. get { return val2; }
  14. set { val2 = value; }
  15. }
  17. private string colorCode = "#ffffff";
  19. public string ColorCode
  20. {
  21. get { return colorCode; }
  22. set { colorCode = value; }
  23. }
  25. protected void Page_Load(object sender, EventArgs e)
  26. {
  27. ProgressText.InnerText = "0%";
  28. CalculateActiveUsersAngle(75);
  29. }
  31. private void CalculateActiveUsersAngle(int TotalUser)
  32. {
  33. //int TotalUser = 50;
  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. }
  68. ProgressText.InnerText = TotalUser + "%";
  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.