# Rotate Progress component in Flex Container

**URL:** <https://forum.inductiveautomation.com/t/rotate-progress-component-in-flex-container/108278>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 9, 2025, 4:24pm UTC](https://forum.inductiveautomation.com/t/rotate-progress-component-in-flex-container/108278 "2025-07-09T16:24:40Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![annikaciul](https://avatars.discourse-cdn.com/v4/letter/a/e9bcb4/32.png) [@annikaciul](https://forum.inductiveautomation.com/u/annikaciul)\
**Post date:** [July 9, 2025, 4:24pm UTC](https://forum.inductiveautomation.com/t/rotate-progress-component-in-flex-container/108278/1 "2025-07-09T16:24:41Z")

</div>

I want a Progress component that is vertical rather than horizontal, and am struggling to find a way to do this. All the other forum threads and google answers have resulted in "it's not possible" (as of a year ago or more) or "use the rotation option" which appears to only be available in vision. The only solution I've found so far is to use a coordinate container, but that seems to get messy quickly if the view is dynamic for screen size variations. I want to have 7 of these bars, each next to their own graphic and in close proximity to each other.

Has anyone found any other options or solutions for this?

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [July 9, 2025, 4:40pm UTC](https://forum.inductiveautomation.com/t/rotate-progress-component-in-flex-container/108278/2 "2025-07-09T16:40:40Z")

</div>

you could try css:  
`transform: rotate(90deg)`

But it can get a bit messy with some components. Try and see.

---

<div class="post-metadata">

**Author:** ![tgarrison](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tgarrison/32/80965_2.png) [@tgarrison](https://forum.inductiveautomation.com/u/tgarrison)\
**Post date:** [July 9, 2025, 7:34pm UTC](https://forum.inductiveautomation.com/t/rotate-progress-component-in-flex-container/108278/3 "2025-07-09T19:34:06Z")

</div>

"build your own" using a small flex column container with a label inside it that dynamically sizes to the proper % of the height of the flex container..

---

<div class="post-metadata">

**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\
**Post date:** [July 9, 2025, 7:40pm UTC](https://forum.inductiveautomation.com/t/rotate-progress-component-in-flex-container/108278/4 "2025-07-09T19:40:27Z")

</div>

You can rotate like pascal said. This will work really strangely inside a flex container.

Another option is to build your own.  
[Vertical Progress Bar.zip](https://forum.inductiveautomation.com/uploads/short-url/yc90ZN7QPVZxEJmcwiLWzOxfiQM.zip) (1.8 KB)

Here's a quick and dirty one I made using a flex container and a label. I did inline styling for simplicity but I generally recommend making style sheets for this sort of thing. It's just an example of how you could make one relatively easily.

Edit: ^^^ What he said 🙂