Perspective - Progress

Component Palette Icon:

Description

The Progress bar visually indicates the progress of a task. It is used to display any value that has an upper and lower bound. Custom settings are available for the track and the bar.

Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective. This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

Name	Description	Property Type
min	The minimum value of the progress indicator. If the value reaches the max, the progress indicator will be completely filled. Must be less than the max. Default is 0.	value: numeric
max	The maximum value of the progress indicator. If the value reaches the max, the progress indicator will be completely filled. Must be greater than 0.0. Default is 100.	value: numeric
value	The current value representing the current progress. Must be greater than 0.0 and less than the value set in max. Default is 50.	value: numeric
mode	Determines if the component should show a determinate state, or an indeterminate loading state. When set to determinate, shows the progress of the value relative to the min and max properties.	value: string
bar	Settings for the bar. Full property descriptions included below.	object
track	Settings for the track. Full property descriptions included below.	object
valueDisplay	Value display configuration. Renders and styles a value overlay above the progress bar. enabled: If true, will show the value display. Value is boolean. format: Format to apply to value, which is then used in the value display. Value is string. justify: Horizontal alignment of the displayed value. Value is string. style: Sets a style for the track. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	object
style	Sets a style for this component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	object

bar and track Child Properties

Name	Description	Property Type
color	A convenience property for setting the base color. This can also be accomplished by using the prop.bar.style or prop.track.style to set the background color.	object
style	Sets a style. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	object
determinate	Determinate configuration. color: A convenience property for setting the color when mode is determinate. This can also be accomplished by using the prop.bar.determinate.style or prop.track.determinate.style to set the background color. style: Sets a style for the bar when mode is determinate. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	object
indeterminate	Indeterminate configuration. color: A convenience property for setting the color when mode is determinate. This can also be accomplished by using the prop.bar.determinate.style or prop.track.determinate.style to set the background color. style: Sets a style for the bar when mode is determinate. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	object

Component Events

The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

Examples

Example 1

Property	Value
max	100
value	80

Example 2

Property	Value
max	100
value	56
mode	determinate
bar.color	#FFAC47
track.color	#FFE8CC
track.borderStyle	solid
track.borderWidth	2
track.borderBottomLeftRadius	15
track.borderBottomRightRadius	15
track.borderTopRightRadius	15
track.borderTopLeftRadius	15
track.borderColor	#A45324
valueDisplay.enabled	true
valueDisplay.format	percent
valueDisplay.justify	center
valueDisplay.fontFamily	Merriweather
valueDisplay.fontWeight	bold