Kendo UI for Angular

Angular CircularProgressBar

  • Use this Angular progress bar component to show progress on a circular gauge,
  • Part of the Kendo UI for Angular library along with 110+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
  • An Alternative to the Linear Progress Bar

    The Angular CircularProgress bar is an alternative to the typical linear progress bar and shows progress as a colored lined on a circle. When the circle is complete, progress is complete. You have total control to make it your own. Map colors to ranges (ex: up to 10% is red), format the middle label, set the size, and much more.


    See the Angular CircularProgressBar demo


    Telerik ASP.NET Core CircularProgressBar Overview
  • Center Template

    Much like the circular gauge, the Angular CircluarProgressBar allows you to display custom text or HTML in the center. This is typically used to show percentage progress.


    Telerik ASP.NET Core CircularProgressBar Template
  • Color Ranges

    The colors feature helps you make this version of the progress bar really stand out. By setting a few properties, you can render the indicator in a different color based on the value and it will change value as the process progresses.

  • Appearance and Animation

    Customize the Angular CircularProgressBar to fit in with your application with properties such as width, height, color, and animation behavior.

  • Globalization

    The CircularProgressBar supports the globalization process through internationalization (i18n), message translation, and right-to-left layouts.

    Read the ProgressBars Globalization documentation


All Kendo UI for Angular Components

Next Steps

Get Started with Kendo UI for Angular

Kendo UI for Angular - Kendoka