# 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:** 5\
**Page:** 2

<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} + "%)"

```

---

<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:** [April 11, 2023, 12:12pm UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/22 "2023-04-11T12:12:31Z")

</div>

I'm not sure if I'm missing something here, but in case someone else is confused too:  
This goes in the `props.style.background` property.

Also, you don't need the 0% color (just like you don't need the 100% color):

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

```

Will do the same thing.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 11, 2023, 9:19pm UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/23 "2023-04-11T21:19:04Z")

</div>

> [@pascal.fragnoud](#):
>
> I'm not sure if I'm missing something here, but in case someone else is confused too:  
> This goes in the `props.style.background` property.

> [@nminchin](#):
>
> Set it to the `props.style.background` property value.

🙂

---

<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:** [April 12, 2023, 7:08am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/24 "2023-04-12T07:08:02Z")

</div>

Your message wasn't there yet, because of the time difference between France and Australia.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 12, 2023, 11:54am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/25 "2023-04-12T11:54:09Z")

</div>

Haha, that checks out. I would tell you all what the stocks are going to do in your future tomorrow (my today), but I wouldn't want to jinx anything by changing your future sorry 😔

[Previous page](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079.md?page=1)