Kendo UI for Angular

Angular CircularProgressBar

  • Instead of using the typical linear progress bar, use this Angular progress bar component to show progress on a circular gauge.
  • Part of the Kendo UI for jQuery library along with 100+ professionally designed components developers trust for all their jQuery UI needs.
  • Get up and running quickly with award winning support, detailed documentation, demos, virtual classrooms, and a 3-million-strong developer community.
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • 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


    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.


  • 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

Kendo Angular UI Getting Started Background

Get Started with Kendo UI for Angular

Kendo UI