# Perspective Progress Bar greater than 100% **URL:** \ **Category:** Ignition\ **Created:** [May 4, 2022, 2:30pm UTC](https://forum.inductiveautomation.com/t/perspective-progress-bar-greater-than-100/59210 "2022-05-04T14:30:34Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![nicholas.robinson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nicholas.robinson/32/22188_2.png) [@nicholas.robinson](https://forum.inductiveautomation.com/u/nicholas.robinson)\ **Post date:** [May 4, 2022, 2:30pm UTC](https://forum.inductiveautomation.com/t/perspective-progress-bar-greater-than-100/59210/1 "2022-05-04T14:30:35Z")
When using the progress bar with the max limit set to 100, I want to be able to show over production formatted with the % sign. If the max is left at 100 and formatting of the value display is set to percent, it is capped at 100% no matter what. If I change to integer formatting I can show the value, but the % sign doesn’t show. Is there a work around for this? ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/e/6e14bed2942b69a508eed07f04a40e6f35ae8d20.png) Thanks, Nick ---
**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:** [May 4, 2022, 2:52pm UTC](https://forum.inductiveautomation.com/t/perspective-progress-bar-greater-than-100/59210/2 "2022-05-04T14:52:54Z")
I guess it’s time for some dirty css hacks ? create a new style, and add this as one of its properties: `} .psc-add_percent::after { content: " %"; } {` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/c/4cb329a92ecd87d46d7a4444a1c3a10b2fe703fa.png) then apply this class to your bar’s `valueDisplay.style.classes` property. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/8/88e2cb3c87c5c71eb1390207cba042a9392e73b3.png) (yes, that’s a HUGE bar) ---
**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:** [May 4, 2022, 3:06pm UTC](https://forum.inductiveautomation.com/t/perspective-progress-bar-greater-than-100/59210/3 "2022-05-04T15:06:21Z")
Alternately create a coordinate view with the progress bar and a superimposed label. - The coordinate view should have a **value** parameter. - Bind the label to the view’s `params.value`. - Create an expression binding on the label’s text property, `{view.params.value} + '%'`. ![Percbar 120](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/c/cc20ecb0228bc346b1f283e582a071ea5bda77ab.gif) Bind the label’s and the progress bar’s width and height to the coordinate container’s width and height and everything should resize properly when you embed the view into your project. You can, of course, reuse your new component as often as you like. ---
**Author:** ![nicholas.robinson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nicholas.robinson/32/22188_2.png) [@nicholas.robinson](https://forum.inductiveautomation.com/u/nicholas.robinson)\ **Post date:** [May 4, 2022, 3:22pm UTC](https://forum.inductiveautomation.com/t/perspective-progress-bar-greater-than-100/59210/4 "2022-05-04T15:22:12Z")
@Transistor I should have qualified my question saying options other than creating new components. My feeling in general is that I should be able to do what I need with the stock components IA provides, at least on things simple like a progress bar. And if not, it is an opportunity for them to improve them. Thanks, Nick ---
**Author:** ![nicholas.robinson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nicholas.robinson/32/22188_2.png) [@nicholas.robinson](https://forum.inductiveautomation.com/u/nicholas.robinson)\ **Post date:** [May 4, 2022, 3:34pm UTC](https://forum.inductiveautomation.com/t/perspective-progress-bar-greater-than-100/59210/5 "2022-05-04T15:34:19Z")
It works for you but when I try it it does nothing unfortunately. Nick ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [May 4, 2022, 5:24pm UTC](https://forum.inductiveautomation.com/t/perspective-progress-bar-greater-than-100/59210/6 "2022-05-04T17:24:04Z")
Did you keep the `}` and `{` at the beginning and end of `} .psc-add_percent::after { content: " %"; } {` they are required. ---
**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:** [May 4, 2022, 6:27pm UTC](https://forum.inductiveautomation.com/t/perspective-progress-bar-greater-than-100/59210/7 "2022-05-04T18:27:54Z")
Then my guess would be… that you did it wrong ;p ---
**Author:** ![nicholas.robinson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nicholas.robinson/32/22188_2.png) [@nicholas.robinson](https://forum.inductiveautomation.com/u/nicholas.robinson)\ **Post date:** [May 4, 2022, 7:03pm UTC](https://forum.inductiveautomation.com/t/perspective-progress-bar-greater-than-100/59210/8 "2022-05-04T19:03:22Z")
that is correct and here is why: we do not use underscores because Ignition’s libraries also do not. So when I named the style “addPercent” it didn’t line up. When I changed the original text you kindly provided to the following it did work: ```auto } .psc-addPercent::after { content: " %"; } { ``` Thank you kindly for the help… NIck ---
**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:** [May 5, 2022, 6:47am UTC](https://forum.inductiveautomation.com/t/perspective-progress-bar-greater-than-100/59210/9 "2022-05-05T06:47:18Z")
I probably should have detailed how it works. In case you’re wondering, this is a css injection. the opening `}` and closing `{` take care of that. When adding a property like `background-image`, a css rule of that name is added and the property you add in the form field is enclosed in `{}`. Thus, starting our rule with `}` closes the rule and allows us to make a new one. The ending `{` is there to match the original `}` to avoid syntax errors. Then it’s just a matter of writing a standard css rule, here we select the style class we’re creating, so it needs to match its name. With just a twist: we need to add `psc-` in front of it, because ignition adds it automatically to differentiate custom classes. `::after` is a css rule that allows adding something after the selected object, so here we simply add " %" after whatever was selected. In this case, we’re lucky that the component permits adding a style class directly to what we’re trying to modify (`valueDisplay`), which makes the selector very simple.