# Progress Bar Right to Left instead of Left to Right

**URL:** <https://forum.inductiveautomation.com/t/progress-bar-right-to-left-instead-of-left-to-right/98568>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [November 13, 2024, 3:39pm UTC](https://forum.inductiveautomation.com/t/progress-bar-right-to-left-instead-of-left-to-right/98568 "2024-11-13T15:39:52Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Stephanie\_Aguiar](https://avatars.discourse-cdn.com/v4/letter/s/f17d59/32.png) [@Stephanie\_Aguiar](https://forum.inductiveautomation.com/u/Stephanie_Aguiar)\
**Post date:** [November 13, 2024, 3:39pm UTC](https://forum.inductiveautomation.com/t/progress-bar-right-to-left-instead-of-left-to-right/98568/1 "2024-11-13T15:39:52Z")

</div>

Hello,  
I am using Ignition Perspective and I needed some assistance changing the progress bar to left to right. What properties should I change?

---

<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:** [November 13, 2024, 3:53pm UTC](https://forum.inductiveautomation.com/t/progress-bar-right-to-left-instead-of-left-to-right/98568/2 "2024-11-13T15:53:52Z")

</div>

> changing the progress bar to left to right.

It is left to right by default.

If you mean right to left then set,  
`POSITION.rotate.angle : 180deg`

---

<div class="post-metadata">

**Author:** ![Stephanie\_Aguiar](https://avatars.discourse-cdn.com/v4/letter/s/f17d59/32.png) [@Stephanie\_Aguiar](https://forum.inductiveautomation.com/u/Stephanie_Aguiar)\
**Post date:** [November 13, 2024, 5:28pm UTC](https://forum.inductiveautomation.com/t/progress-bar-right-to-left-instead-of-left-to-right/98568/3 "2024-11-13T17:28:11Z")

</div>

I don’t seem to see that option through my end how can I add it?

---

<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:** [November 13, 2024, 5:43pm UTC](https://forum.inductiveautomation.com/t/progress-bar-right-to-left-instead-of-left-to-right/98568/4 "2024-11-13T17:43:49Z")

</div>

![Progress bar rotate](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/3/934463e6ac80992cd4262093351010be0ecb825c.png)

---

<div class="post-metadata">

**Author:** ![Stephanie\_Aguiar](https://avatars.discourse-cdn.com/v4/letter/s/f17d59/32.png) [@Stephanie\_Aguiar](https://forum.inductiveautomation.com/u/Stephanie_Aguiar)\
**Post date:** [November 13, 2024, 5:47pm UTC](https://forum.inductiveautomation.com/t/progress-bar-right-to-left-instead-of-left-to-right/98568/5 "2024-11-13T17:47:41Z")

</div>

I have tried this already and this is what happens

 ![IMG_3758](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/6/f6fde992592232fd1a1be011b4ae306c0dcf3c14.jpeg)

---

<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:** [November 13, 2024, 5:57pm UTC](https://forum.inductiveautomation.com/t/progress-bar-right-to-left-instead-of-left-to-right/98568/6 "2024-11-13T17:57:23Z")

</div>

I see "shrink" and "basis" in your screengrab and the Progress Bar component doesn't have these properties. I suspect that you've selected the wrong component or a container.

Right-click on the progress bar in the Project Browser and Deep Select.

---

<div class="post-metadata">

**Author:** ![Samuel\_Sueur](https://avatars.discourse-cdn.com/v4/letter/s/e36b37/32.png) [@Samuel\_Sueur](https://forum.inductiveautomation.com/u/Samuel_Sueur)\
**Post date:** [November 13, 2024, 6:07pm UTC](https://forum.inductiveautomation.com/t/progress-bar-right-to-left-instead-of-left-to-right/98568/7 "2024-11-13T18:07:46Z")

</div>

They probably have the Progress Bar in a Flex container, in which case they would have "shrink" and "basis" and wouldn't be able to use "rotate".

Please use the settings below to have the track bar going from right to left:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/e/ae8fd4088d6c7001d49992655e6c93b82c1a7c19.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/d/5dfbd90ba52c9586020ba6692a49255d9edb03a6.png)

The `transform : scale(-1)` in the track property allows to reverse the progress bar.

Adding the second `transform: scale(-1)` in the valueDisplay allows to ensure the text is **not** reversed.