# How to make the circle icon as in image in perspective

**URL:** <https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [April 5, 2023, 9:27am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079 "2023-04-05T09:27:32Z")\
**Posts on this page:** 1\
**Showing post:** 21

<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:** [April 11, 2023, 10:15am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/21 "2023-04-11T10:15:44Z")

</div>

![Circle fill gradient trick](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/6/061242577aa5acf115d9e535c29b9031e1402a3e.gif)

On the label component add `props.style.background` (edited, thanks, @pascal.fragnoud) and create an expression binding to the variable to be displayed. In my case it's the slider.

```auto
"linear-gradient(0deg, #ff0000 0%, "	// start red
	+ "#ff0000 " // continue to cut-off
	+ {../Slider.props.value} + "%, "
	+ "#ff000000 " // then transparent for remainder
	+ {../Slider.props.value} + "%)"

```

---

_[View the full topic](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079)._