CODEWITHSUNDEEP
cssangularsassangular-material2
VR1256
VR1256

Reputation: 1450

Angular Material MatSpinner how to make background greyed-out

I have a loader component, loader component html which has show = true/ false. I am trying to include matSpinnner which is working just fine when I include in app.component.html but the background is not greyed out.

loading.component.html:

<div class="spinner_container"><mat-spinner *ngIf="show"></mat-spinner></div>

.css

 .spinner_container {
    border-radius: 10px;
    height: 70px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 70px;
    z-index: 3;
    opacity: 0.5;
}

in app.component.html:

    <app-header></app-header>
    <app-loader></app-loader>
    <router-outlet></router-outlet>

Here app-loader is the loader component which I am placing in app.component.html, but how do I make the background of my application background grayed out, so that user cannot click on any controls until spinner goes off.

Here is the image of my spinner , it works fine except that all background controls are accessible and not grayed out.

image

Upvotes: 4

Views: 11559

Answers (1)

Troy Bryant
Troy Bryant

Reputation: 1024

I'd do something like this :

  .dark-overlay{
    background-color: rgba(0,0,0,0.7);
    position: absolute; <--fixed as per the suggestion below
    top:0;
    left:0;
    width: 100%;
    min-height:805px; <-- make this div height or adjust to full page height
}

Then you can just toggle the class display off and on with the spinner

Upvotes: 4

Related Questions