ProgressBar

23 Sep 20255 minutes to read

progress bar control

Properties

animation AnimationModel

Animation for the progress bar

annotations ProgressAnnotationSettingsModel[]

The configuration for annotation in Progressbar.

cornerRadius CornerType

corner type

Defaults to Auto

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enablePieProgress boolean

pie view

Defaults to false

enableProgressSegments boolean

disable the trackSegment

Defaults to false

enableRtl boolean

right to left

Defaults to false

endAngle number

endAngle for circular progress bar

Defaults to 0

gapWidth number

gapwidth of the segment

Defaults to null

height string

height of the progress bar

Defaults to null

innerRadius string

progress radius for circular

Defaults to ‘100%’

isActive boolean

Active state

Defaults to false

isGradient boolean

gradient

Defaults to false

isIndeterminate boolean

Indeterminate progress

Defaults to false

isStriped boolean

striped

Defaults to false

labelOnTrack boolean

labelOnTrack

Defaults to true

labelStyle FontModel

Option for customizing the label text.

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ’’

margin MarginModel

margin size

maximum number

maximum progress value

Defaults to 100

minimum number

minimum progress value

Defaults to 0

progressAnnotationModule ProgressAnnotation

ProgressAnnotation module to use annotations

progressColor string

progressColor

Defaults to null

progressThickness number

progress thickness

Defaults to 0

progressTooltipModule ProgressTooltip

ProgressTooltip module to use tooltip

radius string

track radius for circular

Defaults to ‘100%’

rangeColors RangeColorModel[]

RangeColor in Progressbar.

role ModeType

modes of linear progress

Defaults to null

secondaryProgress number

secondary progress value

Defaults to null

secondaryProgressColor string

Defines color for the secondary progress bar. By default, it takes the primary progress bar color with half of the opacity.

Defaults to ’’

secondaryProgressThickness number

Defines thickness for the secondary progress bar. By default, it takes the primary progress bar thickness.

Defaults to null

segmentColor string[]

Segment color

Defaults to null

segmentCount number

segmentCount of the progress bar

Defaults to 1

showProgressValue boolean

label of the progress bar

Defaults to false

startAngle number

startAngle for circular progress bar

Defaults to 0

theme ProgressTheme

theme style

Defaults to Fabric

tooltip TooltipSettingsModel

Options for customizing the tooltip of progressbar.

trackColor string

trackColor

Defaults to null

trackThickness number

track thickness

Defaults to 0

type ProgressType

type of the progress bar

Defaults to Linear

value number

progress value

Defaults to null

width string

width of the progress bar

Defaults to null

Methods

addEventListener

Adds the handler to the given event listener.

Parameter	Type	Description
eventName	string	A String that specifies the name of the event
handler	Function	Specifies the call to run when the event occurs.

Returns void

appendTo

Appends the control within the given HTML element

Parameter	Type	Description
selector (optional)	string | HTMLElement	Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

To destroy the widget.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter	Type	Description
eventName	string	A String that specifies the name of the event to remove
handler	Function	Specifies the function to remove

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter	Type	Description
moduleList	Function[]	?

Returns void

Events

animationComplete EmitType<IProgressValueEventArgs>

Triggers after the animation completed.

load EmitType<ILoadedEventArgs>

Triggers before the progress bar get rendered.

loaded EmitType<ILoadedEventArgs>

Triggers after the progress bar has loaded.

mouseClick EmitType<IMouseEventArgs>

Trigger after mouse click

mouseDown EmitType<IMouseEventArgs>

Trigger after mouse down

mouseLeave EmitType<IMouseEventArgs>

Trigger after mouse down

mouseMove EmitType<IMouseEventArgs>

Trigger after mouse move

mouseUp EmitType<IMouseEventArgs>

Trigger after mouse up

progressCompleted EmitType<IProgressValueEventArgs>

Triggers after the progress value completed.

textRender EmitType<ITextRenderEventArgs>

Triggers before the progress bar label renders.

tooltipRender EmitType<ITooltipRenderEventArgs>

Triggers before the tooltip for series is rendered.

valueChanged EmitType<IProgressValueEventArgs>

Triggers after the value has changed.