Cirular 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. wrapper for the Kendo UI DataSource widget.

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

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

Initializing the Cirular ProgressBar

The following example demonstrates how to define the Circular ProgressBar, get a reference to its client-side object, and set its value.

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

    <script type="text-javascript">
        $(document).ready(function () {
            $("#progressbar").data("kendoCircularProgressBar").value(50);
        });   
    </script>

Basic Configuration

The following example demonstrates the basic configuration of the ProgressBar.

    @(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>")
    )

You can control the size of the Circular ProgressBar, by placing it in a div container with a specific height.

Modes

The Circular ProgressBar has two modes: infinite and finite.

• The infinite mode renders a Circular ProgressBar that is always spinning and with no clear indication of when the task will be completed. 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. In this mode the component clearly indicates when the task will be completed. To update the value of the Circular ProgressBar, use the value API method. The following example showcases how to update the 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 option.

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

You can use the CenterTemplate option, to display a custom message or an Html element in the center of the Circular ProgressBar.

The following example shows how to render custom text that matches the color of the Circular ProgressBar:

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

Referencing Existing Instances

The following example demonstrates how to get a reference to an existing Telerik UI Circular ProgressBar instance. Once the reference is established, use the Circular ProgressBar client-side API to control its behavior.

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

    <script type="text/javascript">
        $(document).ready(function () {
            // The Name() of the Circular ProgressBar is used to get its client-side instance.
            $("#progressbar").data("kendoCircularProgressBar").value(50);
        }); 
    </script>

See Also

• Circular ProgressBar Overview (Demo)
• JavaScript API Reference of the Circular ProgressBar