# CSS Loader Gif on Table **URL:** \ **Category:** Ignition\ **Tags:** ignition80, perspective\ **Created:** [September 24, 2020, 1:06am UTC](https://forum.inductiveautomation.com/t/css-loader-gif-on-table/39005 "2020-09-24T01:06:11Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![wbaker](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/wbaker/32/85315_2.png) [@wbaker](https://forum.inductiveautomation.com/u/wbaker)\ **Post date:** [September 24, 2020, 1:06am UTC](https://forum.inductiveautomation.com/t/css-loader-gif-on-table/39005/1 "2020-09-24T01:06:11Z")
Hi all, Has anyone implemented a CSS Loader on a view in Perspective? Reference: [https://loading.io/css/](https://loading.io/css/) I have a customer that is interested in displaying the loader during a query execution on a table data set. The goal is to show the user that the table is loading. Thank you, ---
**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:** [September 24, 2020, 3:01am UTC](https://forum.inductiveautomation.com/t/css-loader-gif-on-table/39005/2 "2020-09-24T03:01:34Z")
I haven’t done that, however i have used a progress bar set to “indeterminate”, then I set a binding on the tables display to an expression for False. Then I bind the progress bar to the inverse of the tables display, and then I put a transform on my props.data binding that writes the display value back to true Edit: I can mock this up for you on a table if you want, not sure if that block of text is super easy to understand lol ---
**Author:** ![wbaker](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/wbaker/32/85315_2.png) [@wbaker](https://forum.inductiveautomation.com/u/wbaker)\ **Post date:** [September 24, 2020, 3:20am UTC](https://forum.inductiveautomation.com/t/css-loader-gif-on-table/39005/3 "2020-09-24T03:20:16Z")
Hey Keith, Thank you for the quick response! That’s a clever idea and good use of the native features. I think I understand your block of text. You have two components in 1 container, each fill the container 100% when visible. The binding on ‘display’ watches for any loading of the table and hide’s the table while letting the progress bar appear because of it’s inverse response. ---
**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:** [September 24, 2020, 3:37am UTC](https://forum.inductiveautomation.com/t/css-loader-gif-on-table/39005/4 "2020-09-24T03:37:13Z")
> [@wbaker](#): > > The binding on ‘display’ watches for any loading of the table and hide’s the table while letting the progress bar appear because of it’s inverse response. Exactly! Just make sure that if you finish loading and there is nothing in the result set, then you re-update your tables `position.display` so that you can see that there isnt data. Otherwise it will look like its endlessly loading forever! ---
**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:** [September 24, 2020, 11:20am UTC](https://forum.inductiveautomation.com/t/css-loader-gif-on-table/39005/5 "2020-09-24T11:20:32Z")
I think @nader.chinichian said you need to define all css animation key frames within custom theme css files, which isn’t an issue really especially not for a loader that might be used in a few places. I’m still not sure how you would use that though… Would love to know how he does some of his stuff! 😏 ---
**Author:** ![wbaker](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/wbaker/32/85315_2.png) [@wbaker](https://forum.inductiveautomation.com/u/wbaker)\ **Post date:** [September 24, 2020, 11:40am UTC](https://forum.inductiveautomation.com/t/css-loader-gif-on-table/39005/6 "2020-09-24T11:40:38Z")
Thank y’all for the help! I’ll give the progress bar a try and start there. ---
**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:** [September 24, 2020, 1:29pm UTC](https://forum.inductiveautomation.com/t/css-loader-gif-on-table/39005/7 "2020-09-24T13:29:55Z")
The only problem with this is that you would still have to do exactly what I said, because you aren’t able to change the “No data in this table icon” at all. If you were able to change that icon and text with bindings then I definitely think you could make this happen ---
**Author:** ![mdia](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdia/32/87599_2.png) [@mdia](https://forum.inductiveautomation.com/u/mdia)\ **Post date:** [April 7, 2023, 6:20pm UTC](https://forum.inductiveautomation.com/t/css-loader-gif-on-table/39005/8 "2023-04-07T18:20:44Z")
Posting this Ignition Exchange resource for anyone who ends up here: > **[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. ---
**Author:** ![jacob.ramirez](https://avatars.discourse-cdn.com/v4/letter/j/9dc877/32.png) [@jacob.ramirez](https://forum.inductiveautomation.com/u/jacob.ramirez)\ **Post date:** [October 24, 2024, 5:23pm UTC](https://forum.inductiveautomation.com/t/css-loader-gif-on-table/39005/9 "2024-10-24T17:23:39Z")
@mdia Is there a reason why the only loader that actually shows up is loader-28? ![Screenshot 2024-10-24 122253](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/7/4763bf5fd57e6ae5fefd7fbc3afb94f3b1808e44.png) ---
**Author:** ![mdia](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdia/32/87599_2.png) [@mdia](https://forum.inductiveautomation.com/u/mdia)\ **Post date:** [October 24, 2024, 6:16pm UTC](https://forum.inductiveautomation.com/t/css-loader-gif-on-table/39005/10 "2024-10-24T18:16:17Z")
Could be caused by the browser? Where do you have the app launched? ---
**Author:** ![jacob.ramirez](https://avatars.discourse-cdn.com/v4/letter/j/9dc877/32.png) [@jacob.ramirez](https://forum.inductiveautomation.com/u/jacob.ramirez)\ **Post date:** [October 24, 2024, 6:24pm UTC](https://forum.inductiveautomation.com/t/css-loader-gif-on-table/39005/11 "2024-10-24T18:24:55Z")
The install is on a docker container. That's from a Chrome browser. I see the same behavior in the Designer.