CircularProgressBar

Example

Razor
<kendo-circularprogressbar>
    <colors></colors>
</kendo-circularprogressbar>

ChildTags

Attributes

AttributeTypeDescription
nameStringSets the name of the component.
aria-roleBooleanIf set to true the Circular ProgressBar will have its role attribute set to progressbar. It will also render its aria-valuemin, aria-valuemax, and aria-valuenow attributes.
is-in-client-templateBooleanWhen placing a Tag Helper within a Kendo Template, set the type to text/html and add the is-in-client-template="true" attribute.
deferredBooleanSuppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.
as-moduleBooleanSpecifies whether the initialization script of the component will be rendered as a JavaScript module.
center-templateStringThe template that will be displayed in the center of the progress bar. Template variables: * value - the value * color - the matching color for the value
center-template-handlerStringThe template that will be displayed in the center of the progress bar. Template variables: * value - the value * color - the matching color for the value This option expects the name of a JavaScript function that will be called to return the template.
center-template-idStringThe template that will be displayed in the center of the progress bar. Template variables: * value - the value * color - the matching color for the value This option expects the ID of the script element that contains the template.
center-template-viewIHtmlContentThe template that will be displayed in the center of the progress bar. Template variables: * value - the value * color - the matching color for the value This option expects the instance containing the created HTML.
colorStringThe color of the value pointer. Accepts a valid CSS color string, including hex and rgb.
indeterminateBooleanA value indicating whether endloess loading is enabled
labelStringThe label that would be used as a aria-label for the Circular ProgressBar element. Will be applied only if ariaRole is set to true.
label-idStringThe ID of the element that will be used as a label of the Circular ProgressBar. Will be used as a value of the aria-labelledby attribute. Will be applied only if ariaRole is set to true.
opacityDoubleThe opacity of the value pointer.
pointer-widthDoubleA value indicating how wide will the pointer be
script-attributesIDictionary<String,Object>Sets the attributes that will be added to the script tag of the component's initialization script.
themeStringThe circularProgressBar theme. With versions prior to R1 2023 this can be either the respective LESS theme from the list below or "sass". When set to "sass" the circularProgressBar will read the variables from the Sass-based themes.Note: Since Q2 2024 release, the default value for the theme property is "sass" instead of "default". It is recommended to use "sass" with version Q2 2024 or later.The supported values are: "sass"; "black"; "blueopal"; "bootstrap"; "default"; "highcontrast"; "metro"; "metroblack"; "moonlight"; "silver" or "uniform".
transitionsBooleanA value indicating if transition animations should be played.
valueDoubleThe component value.
In this article
ExampleChildTagsAttributes
Not finding the help you need?
Contact Support