# Icon rotation in Ignition Perspective

**URL:** <https://forum.inductiveautomation.com/t/icon-rotation-in-ignition-perspective/102355>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [February 14, 2025, 9:15am UTC](https://forum.inductiveautomation.com/t/icon-rotation-in-ignition-perspective/102355 "2025-02-14T09:15:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![HAKEEM\_DAYARAJU](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hakeem_dayaraju/32/76842_2.png) [@HAKEEM\_DAYARAJU](https://forum.inductiveautomation.com/u/HAKEEM_DAYARAJU)\
**Post date:** [February 14, 2025, 9:15am UTC](https://forum.inductiveautomation.com/t/icon-rotation-in-ignition-perspective/102355/1 "2025-02-14T09:15:15Z")

</div>

Hi,  
I was trying to rotate the icon [material/autorenew] in forward direction continuously until my motor value becomes zero.  
I was tried the value change script with loop functions, but it's rotating even after the value becomes zero. loop function not breaking.

```
val = currentValue.value
while val > 0:
	for degree in range (0, 361, 10):
		self.getSibling("Icon").props.style.transform = "rotate(" + str(degree) + "deg)"
		if val == 0:
			break 	
	if val == 0 :
		break

```

any suggestions please let me know  
or any alternate way to show the running indication with icon please post it here.

Thanks in advance.  
Dayaraju

---

<div class="post-metadata">

**Author:** ![David\_Stone](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/david_stone/32/79749_2.png) [@David\_Stone](https://forum.inductiveautomation.com/u/David_Stone)\
**Post date:** [February 14, 2025, 9:17am UTC](https://forum.inductiveautomation.com/t/icon-rotation-in-ignition-perspective/102355/2 "2025-02-14T09:17:24Z")

</div>

Use an SVG version of the icon and use CSS animation to implement the rotation animation.

A reference thread:

> [@Rotate animation in perspective](https://forum.inductiveautomation.com/t/rotate-animation-in-perspective/68670):
>
> Hi everyone, I would like to ask you how can I reproduce the same animation here [Component Animation - Ignition User Manual 8.0 - Ignition Documentation](https://docs.inductiveautomation.com/display/DOC80/Component+Animation), in Perspective. I've tried going in the inner svg element and applying a rotate transform and then linking it to a variable but it isnt rotating the element correctly. In general I need to understand how to make animations in Perspective. Thanks

---

<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:** [February 14, 2025, 9:51am UTC](https://forum.inductiveautomation.com/t/icon-rotation-in-ignition-perspective/102355/3 "2025-02-14T09:51:08Z")

</div>

Scripts run on the gateway and that means that your animation would require continuous updates from the the gateway to the browser. This won't work well. In addition, open-ended `while` loops are not a good idea.

Instead use CSS animation which is all handled by the browser. On your icon style properties add `style.animation`. Create an expression binding on the new style,

```python
if({../tagMotorRunning},
    "spin 2s linear infinite",
    ""
)

```

This has the small problem that the animation snaps back to 0° when the motor stops. Someone may have a fix for that.

---

<div class="post-metadata">

**Author:** ![HAKEEM\_DAYARAJU](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hakeem_dayaraju/32/76842_2.png) [@HAKEEM\_DAYARAJU](https://forum.inductiveautomation.com/u/HAKEEM_DAYARAJU)\
**Post date:** [February 19, 2025, 10:18am UTC](https://forum.inductiveautomation.com/t/icon-rotation-in-ignition-perspective/102355/4 "2025-02-19T10:18:28Z")

</div>

Thanks, its working and that too one line of code 👍