In my angular project I added ngx-loading-bar
from aitboudad/ngx-loading-bar, (I installed the http-client package), this is my app.component.html:
<div class="main-comp">
<ngx-loading-bar [color]="'#74ffff'" [includeSpinner]="false" [height]="'3px'" ></ngx-loading-bar>
<header>
...header content...
</header>
<main id="main-content">
<router-outlet></router-outlet>
</main>
<footer id="footer-content">
...footer content...
</footer>
</div>
Now I need to add a black full screen element to block the user to press any buttons while the loader appears. I used the following scss code:
::ng-deep{
.ngx-bar{
z-index: 100;
&::after{
content: "";
display: block;
width: 100vw;
height: 100vh;
background-color: #00000066;
position: fixed;
top: 0;
left: 0;
}
}
}
this indeed shows half opacity black div in front of all elements in the screen, but unfortunately - this doesn't prevent the click on elements! Even when I changed the color to totaly black
or any non-transparent color - I still see the cursor changing to pointer and clicking when it's so - cause actions and http requests.
what is the problem? I tried to give high z-index, and change the positions fron fixed
to absolute
- didn't help. I also suspected that it might be pseudo element issue, so I deleted the ::after
and tried to give full size to the loader div itself - same result!
I will be greatfull for any advice!
Making my comment into an answer, I think the problem was the :after
selector is not working as you intended. You can learn more about the after selector here
Basically, to achieve your desired result, you can wrap the ngx-loading-bar
component on a div and set the styling with a class. (You can use the has()
function for a pure CSS solution. It will style the div only when the loader line appears inside of it)
CSS
.loadbar-bg:has(div) {
display: block;
width: 100vw;
height: 100vh;
background-color: #00000066;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
pointer-events: none;
}
HTML
<div class="main-comp">
<div class="loadbar-bg" >
<ngx-loading-bar [color]="'#74ffff'" [includeSpinner]="false" [height]="'3px'" ></ngx-loading-bar>
</div>
<header>
...header content...
</header>
<main id="main-content">
<router-outlet></router-outlet>
</main>
<footer id="footer-content">
...footer content...
</footer>
</div>