---
title: "Perspective - Progress"
description: "The Progress bar visually indicates the progress of a task."
---

# Perspective - Progress

> The Progress bar visually indicates the progress of a task.

![](2018-12-10_15-43-38prgssbar.png)

**Component Palette Icon**:  

![](2019-05-07_9-38-21.png)

## 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](ignition-modules/perspective/working-with-perspective-components/bindings-in-perspective/bindings-in-perspective.md).
This section only documents the Props Category of properties. The other Categories are described on the [Perspective Component Properties](ignition-modules/perspective/working-with-perspective-components/perspective-component-properties.md) 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](#bar-and-track-child-properties). | object  |
| track        | Settings for the track. Full property descriptions included [below](#bar-and-track-child-properties).| 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](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md). | object             |
| style        | Sets a style for this component. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md). | 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](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).  | 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](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).|object|
| indeterminate | Indeterminate configuration. **color**: A convenience property for setting the color when mode is indeterminate. This can also be accomplished by using the `prop.bar.indeterminate.style` or `prop.track.indeterminate.style` to set the background color.**style**: Sets a style for the bar when mode is indeterminate. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).  | object        |

## Component Events

The [Perspective Event Types Reference](appendix/reference-pages/perspective-event-types-reference.md) page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The [Component Events and Actions](ignition-modules/perspective/working-with-perspective-components/component-events-and-actions.md) 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

![](2019-04-12_16-19-38.png)

|Property|Value|
|--|--|
|max|	100|
|value	|80|

### Example 2

![](2020-05-01_11-02-40.png)

|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|