Circular ProgressBar Overview

The CircularProgressBar is part of Telerik UI for ASP.NET MVC, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

The Telerik UI Circular ProgressBar HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI Circular ProgressBar widget.

The Circular ProgressBar allows you to display and track the progress of a task or process.

The component gives you the flexibility to customize its appearance with a template or set different colors for specific progress ranges.

• Demo page for the Circular ProgressBar HtmlHelper

Initializing the Circular ProgressBar

The following example demonstrates how to define a Circular ProgressBar.

    @(Html.Kendo().CircularProgressBar()
        .Name("progressbar")
        .Value(0)
    )

You can control the size of the Circular ProgressBar by setting its height through the HtmlAttributes() method.

    @(Html.Kendo().CircularProgressBar()
        .Name("progressbar")
        .HtmlAttributes(new {style = "height: 500px;"})
        .Value(10)
    )

Basic Configuration

The following example shows the basic configuration of the Circular ProgressBar with different colors based on the current value and a template that displays the current value in the center of the progress bar.

    @(Html.Kendo().CircularProgressBar()
        .Name("progressbar")
        .Value(0)
        .Colors(c =>
        {
            c.Add().Color("#C0392B").To(25);
            c.Add().Color("#D35400").From(25).To(50);
            c.Add().Color("#D4AC0D").From(50).To(75);
            c.Add().Color("#58D68D").From(75).To(99);
            c.Add().Color("#229954").From(99);
        })
        .CenterTemplate("<span style='color: #: color #;'>#= value == 100 ? \"<span class='k-icon k-i-check'></span>\" : value + '%' #</span>")
    )

Modes

The Circular ProgressBar supports infinite and finite modes.

• The infinite mode renders a Circular ProgressBar that is always spinning without an indication of when the task will be complete. To enable the infinite mode, set the Indeterminate() configuration option to true:

      @(Html.Kendo().CircularProgressBar()
          .Name("progressbar")
          .Indeterminate(true)
          .Colors(c =>
          {
              c.Add().Color("#0071bc");
          })
      )
  

• The finite mode is the default mode of the Circular ProgressBar. The component indicates the task completion. To update the value of the Circular ProgressBar dynamically, use the value() API method.

  The following example showcases how to update the Circular ProgressBar value every 50 milliseconds.

      @(Html.Kendo().CircularProgressBar()
          .Name("progressbar")
          .Value(0)
      )
  
      <script>
          $(document).ready(function() {
              // Update the value every 50 milliseconds until it reaches 100%.
              let interval = setInterval(function () {
                  let pb = $("#progressbar").data("kendoCircularProgressBar");
                  let value = pb.value();
  
                  if (value >= 100) {
                      clearInterval(interval);
                      return;
                  }
  
                  pb.value(value + 1);
              }, 50);
          })
      </script>
  

Colors

You can customize the appearance of the Circular ProgressBar by setting different colors for specific ranges of the progress it displays. To configure the colors, use the Colors configuration.

The following example demonstrates a Circular ProgressBar that changes its color based on the current value:

    @(Html.Kendo().CircularProgressBar()
        .Name("progressbar")
        .Value(0)
        .Colors(c =>
        {
            c.Add().Color("#C0392B").To(25);
            c.Add().Color("#D35400").From(25).To(50);
            c.Add().Color("#D4AC0D").From(50).To(75);
            c.Add().Color("#58D68D").From(75).To(99);
            c.Add().Color("#229954").From(99);
        })
        .CenterTemplate("<span style='color: #: color #;'>#= value == 100 ? \"<span class='k-icon k-i-check'></span>\" : value + '%' #</span>")
    )

Template

The CenterTemplate() option allows you to display a custom message or the current value in the center of the Circular ProgressBar.

The following example shows how to render the progress bar value in the center of the Circular ProgressBar and an icon that indicates when the progress bar completes.

    @(Html.Kendo().CircularProgressBar()
        .Name("progressbar")
        .Value(0)
        .CenterTemplate("<span style='color: #: color #;'>#= value == 100 ? \"<span class='k-icon k-i-check'></span>\" : value + '%' #</span>")
    )

Next Steps

• Getting Started with the Circular ProgressBar
• Basic Usage of the Circular ProgressBar HtmlHelper for ASP.NET MVC (Demo)

See Also

• Using the API of the Circular ProgressBar for ASP.NET MVC (Demo)
• Knowledge Base Section