User Manual

GETTING STARTED


OTHER EDITIONS


LAUNCHERS


MODULES


PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support

ALL USER MANUAL VERSIONS

Ignition 8.1. Offline Version (04/2021)
Ignition 8 Online Version
Ignition 7.9 Online Version
Ignition 7.8 Online Version

Deprecated Pages

SDK Documentation

Employees

Sign In

Skip to end of metadata
Go to start of metadata

Component Palette Icon:

On this page ...


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.

NameDescriptionProperty Type
minThe 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
maxThe 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
valueThe 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.

NameDescriptionProperty Type
colorA convenience property for setting the base color of the bar. This can also be accomplished by using the prop.bar.style to set the background color.object
style

Sets a style for the bar. Full menu of style options is available. You can also specify a style class.

NameDescriptionProperty Name
colorA convenience property for setting the base color of the bar. This can also be accomplished by using the prop.bar.style to set the background color.object
style

Sets a style for the bar. Full menu of style options is available. You can also specify a style class.

object
determinate

Determinate bar configuration.

NameDescriptionProperty Type
colorA convenience property for setting the color of the bar when mode is determinate. This can also be accomplished by using the prop.bar.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. You can also specify a style class.

object

indeterminate

Indeterminate bar configuration.

NameDescriptionProperty Type
colorA convenience property for setting the color of the bar when mode is determinate. This can also be accomplished by using the prop.bar.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. You can also specify a style class.

object

object

object

track

Settings for the track.

NameDescriptionProperty Type
colorA convenience property for setting the base color of the track. This can also be accomplished by using the prop.track.style to set the background color.object
style

Sets a style for the track. Full menu of style options is available. You can also specify a style class.

object
determinate

Determinate track configuration.

NameDescriptionProperty Table
colorA convenience property for setting the color of the track when mode is determinate. This can also be accomplished by using the prop.bar.determinate.style to set the background color.
style

Sets a style for the track when mode is determinate. Full menu of style options is available. You can also specify a style class.

object

indeterminate

Indeterminate track configuration.

NameDescriptionProperty Type
colorA convenience property for setting the color of the track when mode is indeterminate. This can also be accomplished by using the prop.track.indeterminate.style to set the background color.
styleSets a style for the track when mode is indeterminate. Full menu of style options is available.object

object
valueDisplay

Value display configuration. Renders and styles a value overlay above the progress bar.

NameDescriptionProperty Type
enabledIf true, will show the value display.value: boolean
formatFormat to apply to value, which is then used in the value display.value: string
justifyHorizontal alignment of the displayed value.value: string
style

Sets a style for the track. Full menu of style options is available. You can also specify a style class.

object
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


Component Events

Perspective 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

PropertyValue
max100
value80

Example 2

PropertyValue
max100
value56
modedeterminate
bar.color#FFAC47
track.color#FFE8CC
track.borderStylesolid
track.borderWidth2
track.borderBottomLeftRadius15
track.borderBottomRightRadius15
track.borderTopRightRadius15
track.borderTopLeftRadius15
track.borderColor#A45324
valueDisplay.enabledtrue
valueDisplay.formatpercent
valueDisplay.justifycenter
valueDisplay.fontFamilyMerriweather
valueDisplay.fontWeightbold


  • No labels