# Progress Bar Custom Text

**URL:** <https://forum.inductiveautomation.com/t/progress-bar-custom-text/53687>\
**Category:** Ignition\
**Created:** [December 2, 2021, 5:12pm UTC](https://forum.inductiveautomation.com/t/progress-bar-custom-text/53687 "2021-12-02T17:12:22Z")\
**Posts on this page:** 1\
**Showing post:** 4

<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:** [December 7, 2022, 3:47pm UTC](https://forum.inductiveautomation.com/t/progress-bar-custom-text/53687/4 "2022-12-07T15:47:57Z")

</div>

I couldn't find a 'clean' way to do this, but if your text is static you could use css.

First, make a style class. For the example, I called mine `addtext`.

If you're on the last version, with the new css sheet, add this:

```css
.psc-addtext::after {content: " your text";}

```

If you're on an older version, you can the theme file, or css injection.  
If using theme file, add the same line as above in your .css

For injection:  
In your style class, pick a property with a text field, for example background image, and add this:  
`} .psc-addtext::after {content: " your text here"} {`

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

Now, apply that style class to the progress bar's valueDisplay style:

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/1/f1b2b3ab5a9eed87d0db790b9e2411d028833602.png)

And you're done:

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

---

_[View the full topic](https://forum.inductiveautomation.com/t/progress-bar-custom-text/53687)._