CODEWITHSUNDEEP
angular
Rohan Sampat
Rohan Sampat

Reputation: 970

show Loading screen while component is loaded

I want to show a scrolling img while the app-root component in index.html file is loaded. If I place a text in that then the text is displayed immediately but img takes time to show.

<body>
    <app-root>

        <div class="load">
            Test load
        </div>

CSS

.load{
     background-image: path.
}

Upvotes: 1

Views: 2202

Answers (3)

bertrandg
bertrandg

Reputation: 3207

Be sure that your css rule for background is directly inside html file and not inside your css file which have to load too.

<app-root>
    <div style="background-image: url('')"></div>
</app-root>

And if your image isn't too big, you can convert it to base64 on website like this and add it directly like this:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhE...);

or

<img width="50" height="50" src="data:image/png;base64,iVBORw0KGgoAAAANSUhE..."/>

Upvotes: 2

Rahul Singh
Rahul Singh

Reputation: 19632

The part where the loading screen is taken care in my repo 

 constructor(private router: Router,private _loadingSvc: LoadingAnimateService) {

        router.events.subscribe((event: RouterEvent) => {
          this.navigationInterceptor(event);
        });
      }


      // Shows and hides the loading spinner during RouterEvent changes
      navigationInterceptor(event: RouterEvent): void {
        if (event instanceof NavigationStart) {
          this.loading = true;
          this._loadingSvc.setValue(true);// temporary solution to loading
        }
        if (event instanceof NavigationEnd) {
          this.loading = false;
          this._loadingSvc.setValue(false);//temporary solution to loading
        }

        // Set loading state to false in both of the below events to hide the spinner in case a request fails
        if (event instanceof NavigationCancel) {
          this.loading = false;
        }
        if (event instanceof NavigationError) {
          this.loading = false;
        }
      }

Html Template 

<div *ngIf="loading">
            <!-- show something fancy here, here with Angular 2 Material's loading bar or circle -->
            <div class = "parent">
              <div class="spinner">
                <div class="rect1"></div>
                <div class="rect2"></div>
                <div class="rect3"></div>
                <div class="rect4"></div>
                <div class="rect5"></div>
              </div>
            </div>

          </div>

Upvotes: 0

Mohanad Inairat
Mohanad Inairat

Reputation: 81

I would recommend using ngSwitch here

<div [ngSwitch]='status'>
    <div *ngSwitchCase="'loading'">
        <!-- all of the inline styles and massive SVG markup for my spinner -->
    </div>
    <div *ngSwitchCase="'active'">
    </div>
</div>

Upvotes: 0

Related Questions