CODEWITHSUNDEEP
angular
netlander
netlander

Reputation: 1186

Pre-bootstrap loading screen

I'm looking for a pre-bootstrap loading screen along the lines of this example but for Angular 2.

Upvotes: 43

Views: 55130

Answers (6)

AnasSafi
AnasSafi

Reputation: 6264

All what you need for add splash screen in Angular project is tow step:

1- Add this CSS code into head tag of index.html:

<style>
    .splash {
      opacity: 1;
      z-index: 1;
      visibility: visible;
      transition: opacity 1.4s ease-in-out, visibility 1.4s;
      position: fixed;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      background: #1e85c8;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    app-root:not(:empty) + .splash {
      opacity: 0;
      visibility: hidden;
    }
    .splash_image {
      width: 100%;
      max-width: 200px;
    }
  </style>

2- Then add this HTML lines into app-root selector:

  <div class="splash">
    <img class="splash_image" src="assets/images/logo.svg" alt="" />
  </div>

Note: Change src for valid logo path...

In this way, loader will auto disappear when Angular set content of app-root, I think this best way for splash screen in Angular.

Full code of index.html file will be like this:

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Project Title</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <style>
    .splash {
      opacity: 1;
      z-index: 1;
      visibility: visible;
      transition: opacity 1.4s ease-in-out, visibility 1.4s;
      position: fixed;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      background: #1e85c8;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    app-root:not(:empty) + .splash {
      opacity: 0;
      visibility: hidden;
    }
    .splash_image {
      width: 100%;
      max-width: 200px;
    }
  </style>

</head>
<body>
<app-root>
  <div class="splash">
    <img class="splash_image" src="assets/images/logo.svg" alt="" />
  </div>
</app-root>
</body>
</html>

Upvotes: 0

dfsq
dfsq

Reputation: 193271

I can suggest a simple CSS approach.

First of all add .loading div into main HTML page, it should follow main app component element. For example:

<my-app></my-app>

<div class="loading">
    <h1>Loading...</h1>
</div>

Now you can target and style splash screen with my-app:empty + .loading CSS selector, and make it disappear as soon as the app gets bootstraped. Example:

/* default .loading styles, .loading should be invisible, opacity: 0, z-index: -1 */
.loading {
    opacity: 0;
    transition: opacity .8s ease-in-out;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #000;
    z-index: -1;
}
/* .loading screen is visible when app is not bootstrapped yet, my-app is empty */
my-app:empty + .loading {
    opacity: 1;
    z-index: 100;
}

This approach works better if you put all heavy scripts before closing body tag and leave just minimal styles necessary to the loading screen in the head so it shows up as soon as possible and then scripts start to load.

Here is a simple demo:

Demo: http://plnkr.co/edit/v8FtkSluRDSrkcq4v7a1?p=preview

Upvotes: 85

Londeren
Londeren

Reputation: 3331

You can do something like this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style type="text/css">
    app-root:empty::after {
      content: 'Loading…';
      width: 100px;
      height: 100px;
      position: absolute;
      display: block;
      top: 50%;
      left: 50%;
      font-size: 20px;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
<app-root></app-root>
</body>
</html>

Very simple approach. And of course you can replace text with loader image.

Upvotes: 4

mariomol
mariomol

Reputation: 697

i guess the best approach is to have the inline style in the loading div HTML (to show). Then in css you have a class to hide and use the ngOnInit to include that class in the loading div.

In that case we will have the html rendering the style first.. showing the loading and after all (download css and run js) it will have the class that hides it.

export class AppComponent implements OnInit {
  public loaded=false;

  ngOnInit() {
    this.loaded=true;
  }
 }
 .loading.loaded {
     z-index: -1;
     opacity: 0;
  }
<div class="loading" 

    style="opacity: 0.9;
       color: #EEE;
      position: absolute;
      top: 0;
      width: 100%;
      text-align: center;
      transition: opacity .8s ease-in-out;
      height: 100%;
      background: #fff;
      z-index: 100;
      display: table;"
      
  [class.loaded]="loaded">
  
      <md-spinner 
        style="display: table-cell;
        vertical-align: middle;"
        ></md-spinner>
        
  </div>

I had to take out the visibility of the components inside the angular view, because they were loaded without any style when load (like a flickr without style). So in css i hide and in the app.html i show

footer, header, home-view, homebuyer-view, homeseller-view, homecommerce-view,
.mat-select-placeholder{
  visibility: hidden !important;
}
<style *ngIf="loaded">
  footer, header,home-view, homebuyer-view, homeseller-view, homecommerce-view,
  .mat-select-placeholder{
          visibility: visible !important;
  }
</style>

Upvotes: 1

Oduwole Oluwasegun
Oduwole Oluwasegun

Reputation: 188

Why not try this approach: 

<app-root>
    <style type="text/css">
        #pre-bootstrap {
            background-color: #262626;
            bottom: 0px;
            left: 0px;
            position: fixed;
            right: 0px;
            top: 0px;
            z-index: 999999;
        }

        #pre-bootstrap div.messaging {
            color: #FFFFFF;
            font-family: monospace;
            left: 0px;
            margin-top: -37px;
            position: absolute;
            right: 0px;
            text-align: center;
            top: 50%;
        }

        #pre-bootstrap h1 {
            font-size: 26px;
            line-height: 35px;
            margin: 0px 0px 20px 0px;
        }

        #pre-bootstrap p {
            font-size: 18px;
            line-height: 14px;
            margin: 0px 0px 0px 0px;
        }
  </style>

  <div id="pre-bootstrap">
    <div class="messaging">
        <h1>
            App is Loading
        </h1>

        <p>
            Please stand by for your ticket to awesome-town!
        </p>

      </div>
   </div>
</app-root>

Upvotes: 9

Rodney
Rodney

Reputation: 5565

I went with a simple approach (I did like the other answer though too) using FontAwesome spinners:

<app-root>
    <div class="text-center">
        <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
        <div>Something witty for your userbase</div>
    </div>
</app-root>

Upvotes: 21

Related Questions