ProgressBarComponent
Represents the Kendo UI ProgressBar component for Angular.
@Component({
selector: 'my-app',
template: `
<kendo-progressbar [value]="value">
</kendo-progressbar>
`
})
class AppComponent {
public value = 50;
}
Selector
kendo-progressbar
Export Name
Accessible in templates as #kendoProgressBarInstance="kendoProgressBar"
Inputs
animation
boolean | ProgressBarAnimation
The animation configuration of the ProgressBar.
Defaults to false
.
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 inner element which represents the empty portion of the progress bar
(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 inner element which represents the empty portion of the progress bar
(see example).
Supports the type of values that are supported by ngStyle
.
indeterminate
boolean
Sets the indeterminate
state of the ProgressBar.
Defaults to false
.
label
boolean | LabelSettings
Determines whether the status label will be visible.
Defaults to true
—the label will be visible and displayed with the default
LabelSettings
having its position set to end
and its format set to value
.
max
number
The maximum value of the ProgressBar.
Defaults to 100
.
min
number
The minimum value of the ProgressBar.
Defaults to 0
.
orientation
Defines the orientation of the ProgressBar
(see example).
Defaults to horizontal
.
progressCssClass
string | string[] | Set<string> | {[key: string]: any}
The CSS classes that will be rendered on the inner element which represents the full portion of the progress bar
(see example).
Supports the type of values that are supported by ngClass
.
progressCssStyle
{[key: string]: string}
The CSS styles that will be rendered on the inner element which represents the full portion of the progress bar
(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
.
Events
animationEnd
Fires when the animation which indicates the latest value change is completed.