# Progress Bar Component

**URL:** <https://forum.inductiveautomation.com/t/progress-bar-component/87881>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [March 26, 2024, 9:15am UTC](https://forum.inductiveautomation.com/t/progress-bar-component/87881 "2024-03-26T09:15:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![josh3](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@josh3](https://forum.inductiveautomation.com/u/josh3)\
**Post date:** [March 26, 2024, 9:15am UTC](https://forum.inductiveautomation.com/t/progress-bar-component/87881/1 "2024-03-26T09:15:15Z")

</div>

Hi All,

Does anyone know if its possible to have 2 process varibles function within the progress bar?

I would like to have it so can show current PV and target PV.

Thanks.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 26, 2024, 9:55am UTC](https://forum.inductiveautomation.com/t/progress-bar-component/87881/2 "2024-03-26T09:55:11Z")

</div>

No, as its name suggests, it's a progress bar!  
You can make your own quite easily using three labels, background, setpoint and actual.

![ActualAndSetpoint](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/1/e12af2bbc7b70f2441469555cdcabdb37ed50e0a.gif)

Paste the code below into Project Browser | Perspective | Views.

> **View**
>
> ```auto
> {
> "custom": {},
> "params": {},
> "props": {
> "defaultSize": {
> "height": 173,
> "width": 489
> }
> },
> "root": {
> "children": [
> {
> "meta": {
> "name": "sldActual"
> },
> "position": {
> "height": 0.173,
> "width": 0.3926,
> "x": 0.2738,
> "y": 0.3622
> },
> "props": {
> "value": 28
> },
> "type": "ia.input.slider"
> },
> {
> "meta": {
> "name": "sldSetpoint"
> },
> "position": {
> "height": 0.173,
> "width": 0.3926,
> "x": 0.274,
> "y": 0.573
> },
> "props": {
> "value": 43
> },
> "type": "ia.input.slider"
> },
> {
> "meta": {
> "name": "lblActual"
> },
> "position": {
> "height": 0.173,
> "rotate": {
> "anchor": "50% 169%"
> },
> "width": 0.1022,
> "x": 0.0286,
> "y": 0.3622
> },
> "props": {
> "text": "Actual"
> },
> "type": "ia.display.label"
> },
> {
> "meta": {
> "name": "lblSetpoint"
> },
> "position": {
> "height": 0.173,
> "rotate": {
> "anchor": "50% 169%"
> },
> "width": 0.1022,
> "x": 0.0286,
> "y": 0.573
> },
> "props": {
> "text": "Setpoint"
> },
> "type": "ia.display.label"
> },
> {
> "meta": {
> "name": "Track"
> },
> "position": {
> "height": 0.173,
> "width": 1,
> "y": 0.1081
> },
> "props": {
> "style": {
> "backgroundColor": "--neutral-30"
> }
> },
> "type": "ia.display.label"
> },
> {
> "meta": {
> "name": "barActual"
> },
> "position": {
> "height": 0.173,
> "y": 0.1081
> },
> "propConfig": {
> "position.width": {
> "binding": {
> "config": {
> "expression": "{../sldActual.props.value} / 100\r\n"
> },
> "type": "expr"
> }
> }
> },
> "props": {
> "style": {
> "backgroundColor": "#5585F2"
> }
> },
> "type": "ia.display.label"
> },
> {
> "meta": {
> "name": "barSetpoint"
> },
> "position": {
> "height": 0.173,
> "width": 0.01,
> "y": 0.1081
> },
> "propConfig": {
> "position.x": {
> "binding": {
> "config": {
> "expression": "{../sldSetpoint.props.value} / 100\r\n"
> },
> "type": "expr"
> }
> }
> },
> "props": {
> "style": {
> "backgroundColor": "#233C73"
> }
> },
> "type": "ia.display.label"
> }
> ],
> "meta": {
> "name": "root"
> },
> "props": {
> "mode": "percent"
> },
> "type": "ia.container.coord"
> }
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![josh3](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@josh3](https://forum.inductiveautomation.com/u/josh3)\
**Post date:** [March 26, 2024, 10:02am UTC](https://forum.inductiveautomation.com/t/progress-bar-component/87881/3 "2024-03-26T10:02:22Z")

</div>

thanks.

thats cool!

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 26, 2024, 10:06am UTC](https://forum.inductiveautomation.com/t/progress-bar-component/87881/4 "2024-03-26T10:06:59Z")

</div>

Make a reusable view with parameters for setpoint and actual. Note that I used a coordinate container with width set to percent. Tweak that as required and bind the width of the Actual bar to the "actual" parameter and the X position of the Setpoint bar to the "setpoint" parameter.