# How to implement a loading icon? **URL:** \ **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:** 10\ **Page:** 1
**Author:** ![Marco\_Keller](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@Marco\_Keller](https://forum.inductiveautomation.com/u/Marco_Keller)\ **Post date:** [December 9, 2021, 4:19pm UTC](https://forum.inductiveautomation.com/t/how-to-implement-a-loading-icon/53950/1 "2021-12-09T16:19:03Z")
I would like to implement a loader ([https://loading.io/css/](https://loading.io/css/)). But could not get it work. Is this even possible? I just added the CSS code into a MyCSS.css which I imported in the light.css. After that I added a value animation: lds-spinner under style. ![grafik](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/6/469c25584245a51e9d25b7bb42e1cd2bdfc6c93e.png) Could anybody help me? ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [December 9, 2021, 4:59pm UTC](https://forum.inductiveautomation.com/t/how-to-implement-a-loading-icon/53950/2 "2021-12-09T16:59:10Z")
This probably won’t readily work in Perspective. Depending on the exact nature of the CSS used, you may be able to author a matching style class, which you would then be able to use directly in a Perspective component. However, if the CSS isn’t part of the supported definitions of a style class, you’ll have to use a theme to define your classes. But even after you’ve created the class(es) required, you won’t be able to actually apply it to arbitrary Perspective elements. ---
**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\ **Post date:** [December 9, 2021, 6:23pm UTC](https://forum.inductiveautomation.com/t/how-to-implement-a-loading-icon/53950/3 "2021-12-09T18:23:15Z")
I have this working, but I’m still testing out how to make it easiest to use within the designer. The biggest problem I see with your current situation (and one of the reasons why it isn’t working yet) is because you’re using `lds-spinner` as an `animation` value when `lds-spinner` should be typed into `style.classes`, like so: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/2/7244d3a5c64705cdb99ac715373ba9f13dd1514f.png) However, that still won’t work. If you look at the actual CSS in a session using the browser’s dev tools, you’ll see that `psc-` will be prepended to your style class `lds-spinner`. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/6/c65a4fbe7588e4ee64bc0753b095fd223bb2b808.png) To fix this, go back to your webdev resource (or MyCSS.css) and change every instance of `lds-spinner` to `psc-lds-spinner`. **HOWEVER** , this still might not work. For instance, the markup that is given in the docs you included above looks something like this: ```auto ``` Those extra divs actually need to be there for the spinner to work. There is not Perspective component that has the structure. For instance, if you look at a basic Label component, here is the markup that’s associated with it: ```auto
Label
``` This is clearly a different structure, so your animation won’t work OR it won’t do what you want it to. **HOWEVERER** , there is a way to do what you want to do, but it will require you create two WebDev resources. You create your HTML and CSS text resource and then you can use an Inline Frame component to embed your spinner or whatever loading animation you want into your view. Then you would have a binding that will show and hide the iframe depending on some state. For example, when a table is loading data (before `props.data` is populated, which is an easy binding), you can set the iframe’s `meta.visible` property to `true` and then when all of the table is loaded, you can set the iframe to `false`. The animation will still be playing in the background, it just won’t be visible to the user. I don’t know what the performance issues with this approach might be… If you need some help on getting this done, I can set up a project and demonstrate it for you… **EDIT:** Just so you know I have it working: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/d/6daa8850c3222ac831f398870cf5c9a59bfab79a.png) ---
**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")
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) ---
**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\ **Post date:** [December 9, 2021, 7:37pm UTC](https://forum.inductiveautomation.com/t/how-to-implement-a-loading-icon/53950/5 "2021-12-09T19:37:33Z")
Heck ya, @kgamble! I was only bringing up how one can accomplish using the library OP posted. There are, of course, other ways to add spinners and other animations. ---
**Author:** ![Marco\_Keller](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@Marco\_Keller](https://forum.inductiveautomation.com/u/Marco_Keller)\ **Post date:** [December 10, 2021, 6:50am UTC](https://forum.inductiveautomation.com/t/how-to-implement-a-loading-icon/53950/6 "2021-12-10T06:50:58Z")
That looks great @YF129701! I will try your solution and give you feedback asap. Thanks a lot! ---
**Author:** ![Marco\_Keller](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@Marco\_Keller](https://forum.inductiveautomation.com/u/Marco_Keller)\ **Post date:** [December 10, 2021, 8:24am UTC](https://forum.inductiveautomation.com/t/how-to-implement-a-loading-icon/53950/7 "2021-12-10T08:24:41Z")
Okey just tested those ideas and i will go for the solution of @kgamble. Thanks for your answers. Cheers ---
**Author:** ![lachguerabdallah](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lachguerabdallah/32/25558_2.png) [@lachguerabdallah](https://forum.inductiveautomation.com/u/lachguerabdallah)\ **Post date:** [December 10, 2021, 12:30pm UTC](https://forum.inductiveautomation.com/t/how-to-implement-a-loading-icon/53950/8 "2021-12-10T12:30:34Z")
where do you use this icon? How can you tell if it is loading something? ---
**Author:** ![Aaron\_Kneeland](https://avatars.discourse-cdn.com/v4/letter/a/91b2a8/32.png) [@Aaron\_Kneeland](https://forum.inductiveautomation.com/u/Aaron_Kneeland)\ **Post date:** [January 6, 2022, 1:01pm UTC](https://forum.inductiveautomation.com/t/how-to-implement-a-loading-icon/53950/9 "2022-01-06T13:01:59Z")
I used the icon settings from above but instead of the Animation I used an Expression on the angle binding. The if statement just turns off the rotation when in the designer because there is a default message on that in parameter. ```auto if({view.params.Message}='!This Message!',0,toFloat(right(toStr(now(10)),4),0)*360) ``` ---
**Author:** ![mdia](https://avatars.discourse-cdn.com/v4/letter/m/ce73a5/32.png) [@mdia](https://forum.inductiveautomation.com/u/mdia)\ **Post date:** [April 7, 2023, 6:23pm UTC](https://forum.inductiveautomation.com/t/how-to-implement-a-loading-icon/53950/10 "2023-04-07T18:23:08Z")
Check out my Ignition Exchange resource, it has a wide collection of CSS loading icons: > **[Ignition Exchange](https://inductiveautomation.com/exchange/2454/overview)** > > Discover, share, and download community made Ignition resources in collaboration with your organization or the Ignition community.