# Show overlay screen until binding is done

**URL:** <https://forum.inductiveautomation.com/t/show-overlay-screen-until-binding-is-done/108317>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 10, 2025, 12:52pm UTC](https://forum.inductiveautomation.com/t/show-overlay-screen-until-binding-is-done/108317 "2025-07-10T12:52:46Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ajay\_Gupta](https://avatars.discourse-cdn.com/v4/letter/a/f05b48/32.png) [@Ajay\_Gupta](https://forum.inductiveautomation.com/u/Ajay_Gupta)\
**Post date:** [July 10, 2025, 12:52pm UTC](https://forum.inductiveautomation.com/t/show-overlay-screen-until-binding-is-done/108317/1 "2025-07-10T12:52:46Z")

</div>

Hi,

In ignition perspective screen, until all the bindings have been refreshed/completed the component looks red indicating binding error.

I want to show an overlay screen until all the bindings have been refreshed to give a cleaner user experience.

How can I achieve this?

Thanks & regards,  
Ajay Kumar Gupta

---

<div class="post-metadata">

**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\
**Post date:** [July 10, 2025, 2:49pm UTC](https://forum.inductiveautomation.com/t/show-overlay-screen-until-binding-is-done/108317/2 "2025-07-10T14:49:36Z")

</div>

I know this isn't what you're asking for but making sure you know that you can hide those overlays entirely with "Overlay Opt Out" on the binding itself.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/b/7b06f6a05e972e8f4fed1ce58669725a7642284c.png)

Some people do CSS "fade in" animations to lead into page loads to hide overlays. I'm not aware of a way to display a custom overlay until a binding loads.

---

<div class="post-metadata">

**Author:** ![Ajay\_Gupta](https://avatars.discourse-cdn.com/v4/letter/a/f05b48/32.png) [@Ajay\_Gupta](https://forum.inductiveautomation.com/u/Ajay_Gupta)\
**Post date:** [July 10, 2025, 7:43pm UTC](https://forum.inductiveautomation.com/t/show-overlay-screen-until-binding-is-done/108317/3 "2025-07-10T19:43:10Z")

</div>

Thanks @Steve_Laubach .  
I know the overlay opt-out option.  
Byt css fade in also seems to be a good idea.  
Not sure how implement that.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [July 10, 2025, 8:07pm UTC](https://forum.inductiveautomation.com/t/show-overlay-screen-until-binding-is-done/108317/4 "2025-07-10T20:07:16Z")

</div>

This has been discussed before, perhaps so a forum search. What I did was use CSS for a slow transition, like fade in.

---

<div class="post-metadata">

**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\
**Post date:** [July 10, 2025, 8:08pm UTC](https://forum.inductiveautomation.com/t/show-overlay-screen-until-binding-is-done/108317/5 "2025-07-10T20:08:15Z")

</div>

Probably advanced style sheet using an opacity animation with max animation count of 1. This would be a style applied to the view. So basically the view fades in to view. You probably want to adjust the animation timing function to be more transparent in the beginning of the animation.

> **[animation-iteration-count - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count)**
>
> The animation-iteration-count CSS property sets the number of times an animation sequence should be played before stopping.

I see @jlandwerlen replied. I would recommend searching for the thread he is referring to. It's probably good.