# Progress Bar - Style

**URL:** <https://forum.bricksbuilder.io/t/progress-bar-style/8083>\
**Category:** How To\
**Tags:** how-to\
**Created:** [November 22, 2022, 12:24pm UTC](https://forum.bricksbuilder.io/t/progress-bar-style/8083 "2022-11-22T12:24:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nicolay](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/nicolay/32/6885_2.png) [@nicolay](https://forum.bricksbuilder.io/u/nicolay)\
**Post date:** [November 22, 2022, 12:24pm UTC](https://forum.bricksbuilder.io/t/progress-bar-style/8083/1 "2022-11-22T12:24:45Z")

</div>

The progress bar is wounderfull. Love it. But I’am trying to create a “Personas” page, and I would like to create a bar similar to the added image. Do anyone have an idea of a custom css or an other “hack” to make it look like the attached image?

 ![Skjermbilde 2022-11-22 kl. 13.17.52](https://forum.bricksbuilder.io/uploads/default/original/2X/a/aeea532daa56e62d8afdb8d1cefed9a08de33e78.png)

---

<div class="post-metadata">

**Author:** ![Dennis](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/dennis/32/6631_2.png) [@Dennis](https://forum.bricksbuilder.io/u/Dennis)\
**Post date:** [November 22, 2022, 1:53pm UTC](https://forum.bricksbuilder.io/t/progress-bar-style/8083/2 "2022-11-22T13:53:05Z")

</div>

Hi @nicolay,

I’m not 100% sure what you’re trying to achieve. Should it be a static bar or should the point on the bar be draggable?

If it is supposed to be a static element, you could achieve it by simply placing an icon on top of the progress bar. I gave it a quick try and managed to create something that’s visually similar fairly easily:

 ![image](https://forum.bricksbuilder.io/uploads/default/original/2X/e/e340fcdc553e3e6aa3c740dc31e0cdf380ccb929.png)

Structure:  
 ![image](https://forum.bricksbuilder.io/uploads/default/original/2X/8/8e012087b6fdb320f4411665c59ae19f22c2de46.png)

---

<div class="post-metadata">

**Author:** ![nicolay](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/nicolay/32/6885_2.png) [@nicolay](https://forum.bricksbuilder.io/u/nicolay)\
**Post date:** [November 22, 2022, 2:13pm UTC](https://forum.bricksbuilder.io/t/progress-bar-style/8083/3 "2022-11-22T14:13:04Z")

</div>

It’s static, just to display witch “perk” you’re closest to. That works better than the alternative of having a image – I’ll try that, thank you! 🙂

---

<div class="post-metadata">

**Author:** ![Dennis](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/dennis/32/6631_2.png) [@Dennis](https://forum.bricksbuilder.io/u/Dennis)\
**Post date:** [November 22, 2022, 2:13pm UTC](https://forum.bricksbuilder.io/t/progress-bar-style/8083/4 "2022-11-22T14:13:47Z")

</div>

Cool, let me know if you’ve any questions!