How to make the circle icon as in image in perspective

Ignition
21

Circle fill gradient trick

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.

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

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):

"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.

3 Likes
23

:slight_smile:

24

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

25

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 :pensive:

4 Likes