# How to implement a loading icon?

**URL:** <https://forum.inductiveautomation.com/t/how-to-implement-a-loading-icon/53950>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [December 9, 2021, 4:19pm UTC](https://forum.inductiveautomation.com/t/how-to-implement-a-loading-icon/53950 "2021-12-09T16:19:03Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [December 9, 2021, 7:30pm UTC](https://forum.inductiveautomation.com/t/how-to-implement-a-loading-icon/53950/4 "2021-12-09T19:30:42Z")

</div>

I actually do this with an icon and a simple CSS animation in a theme

Icon Props:

```auto
path: ""
color: ""
basis: 25px

```

Icon style:

```auto
{
  "border": "solid 5px #cfd0d1",
  "borderBottomColor": "#1c87c9",
  "borderRadius": "50%",
  "width": "25px",
  "animation": "1.5s linear infinite spinner",
  "height": "25px"
}

```

Animation in theme:

```auto
@keyframes spinner {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg); }
}

```

Ta-Dah! (It is a lot smoother but the gif made it a bit choppier for some reason)  
 ![Screen Recording 2021-12-09 at 11.26.46 AM-2](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/0/3078490d91445517f94708bfc34b19d8dca83832.gif)

---

_[View the full topic](https://forum.inductiveautomation.com/t/how-to-implement-a-loading-icon/53950)._