• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
New to Kendo UI for Angular? Start a free 30-day trial

CircularProgressBarComponent

Represents the Kendo UI Circular ProgressBar component for Angular.

@Component({
   selector: 'my-app',
   template: `
       <kendo-circularprogressbar [value]="value"></kendo-circularprogressbar>
   `
})
class AppComponent {
    public value: number = 50;
}

Selector

kendo-circularprogressbar

Export Name

Accessible in templates as #kendoCircularProgressBarInstance="kendoCircularProgressBar"

Inputs

NameTypeDefaultDescription

animation

boolean

false

Indicates whether an animation will be played on value changes.

indeterminate

boolean

false

Puts the Circular ProgressBar in indeterminate state.

max

number

100

The maximum value which the Circular Progressbar can accept.

min

number

0

The minimum value which the Circular Progressbar can accept.

opacity

number

1

The opacity of the value arc.

progressColor

string | ProgressColor[]

Configures the pointer color. Could be set to a single color string or customized per progress stages.

value

number

0

Sets the default value of the Circular Progressbar between min and max.

Events

NameTypeDescription

animationEnd

EventEmitter<AnimationEndEvent>

Fires when the animation which indicates the latest value change is completed.

In this article

Not finding the help you need?