• 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
Components / ProgressBars / API / ChunkProgressBarComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

ChunkProgressBarComponent

Represents the Kendo UI ChunkProgressBar component for Angular.

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

Selector

kendo-chunkprogressbar

Export Name

Accessible in templates as #kendoChunkProgressBarInstance="kendoChunkProgressBar"

Inputs

NameTypeDefaultDescription

chunkCount

number

Sets the number of chunks into which the ChunkProgressBar will be split. Defaults to 5.

disabled

boolean

If set to true, the ProgressBar will be disabled (see example). It will still allow you to change its value. Defaults to false.

emptyCssClass

string | string[] | Set<string> | {[key: string]: any}

The CSS classes that will be rendered on the empty chunk elements (see example). Supports the type of values that are supported by ngClass.

emptyCssStyle

{[key: string]: string}

The CSS styles that will be rendered on the empty chunk elements (see example). Supports the type of values that are supported by ngStyle.

indeterminate

boolean

Sets the indeterminate state of the ProgressBar. Defaults to false.

max

number

The maximum value of the ProgressBar. Defaults to 100.

min

number

The minimum value of the ProgressBar. Defaults to 0.

orientation

ProgressBarOrientation

Defines the orientation of the ProgressBar (see example). Defaults to horizontal.

progressCssClass

string | string[] | Set<string> | {[key: string]: string}

The CSS classes that will be rendered on the full chunk elements (see example). Supports the type of values that are supported by ngClass.

progressCssStyle

{[key: string]: any}

The CSS styles that will be rendered on the full chunk elements (see example). Supports the type of values that are supported by ngStyle.

reverse

boolean

If set to true, the ProgressBar will be reversed (see example). Defaults to false.

value

number

The value of the ProgressBar. Has to be between min and max. Defaults to 0.

In this article

Not finding the help you need?

Contact Support