Skip to main content
Version: 8.1

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.

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
modeDetermines 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
barSettings for the bar. Full property descriptions included below.object
trackSettings for the track. Full property descriptions included below.object
valueDisplayValue 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
    styleSets 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‚Äč

    NameDescriptionProperty Type
    colorA 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
    styleSets 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
    determinateDeterminate 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
    indeterminateIndeterminate 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‚Äč

    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