Kako prilagoditi Angular početni zaslon (Initial Loading Screen)

Ako ste do sada razvijali Angular web aplikacije ili koristili tuđe mogli ste kod svih njih primijetiti jednu zajedničku stvar, a to je početni zaslon koji se prikazuje prije nego se učita Angular aplikacija i na kojemu u gornjem lijevom kutu ekrana piše “Loading…” (Angular 2) uz monotonu bijelu pozadinsku boju. Kasnije je to izbačeno te se prikazuje samo obična, prazna, bijela pozadina (>= Angular 4).

Išao sam malo istražiti kako najbolje to riješiti tako da i meni kao developeru, a i korisniku bude lijepo. Našao sam nekoliko mogućnosti od kojih sam odabrao jednu o kojoj ću nešto više napisati u nastavku.

Kreiranje novog Angular projekta

Koristeći Angular CLI pokrećem novi projekt

$ ng new AngularLoadingScreen
$ ng serve

1 2	$ ng new AngularLoadingScreen $ ng serve

Početni zaslon je čisto bijele boje i to je dobar izbor ako nakon toga ide prikaz npr. stranice za prijavu korisnika s bijelom pozadinom. U tom će se slučaju te dvije bijele pozadinske boje lijepo stopiti i činiti cjelinu.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularLoadingScreen</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

<!doctype html>

<head>

<title>AngularLoadingScreen</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

Prilagođeni početni zaslon

Za promjenu prikaza početnog zaslona dovoljno je kreirati novi <div> s klasom loading.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularLoadingScreen</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <div class="loading"></div>
</body>
</html>

<!doctype html>

<head>

<title>AngularLoadingScreen</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

.loading {
    opacity: 0;
    transition: opacity .8s ease-in-out;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #000;
    z-index: -1;
}

my-app:empty + .loading {
    opacity: 1;
    z-index: 100;
}

.loading {

opacity: 0;

transition: opacity .8s ease-in-out;

position: fixed;

height: 100%;

width: 100%;

top: 0;

left: 0;

background: #000;

z-index: -1;

}

my-app:empty + .loading {

opacity: 1;

z-index: 100;

}

Na kraju to izgleda ovako

Zaključak

To bi bilo sve. Ovo se možda ne čini kao nešto vrijedno spomena, ali svakako daje onaj završni sjaj Angular web aplikaciji.

Kako prilagoditi Angular početni zaslon (Initial Loading Screen)

Kreiranje novog Angular projekta

Prilagođeni početni zaslon

Zaključak

Objavio

Tomislav Stanković

Odgovori Otkaži odgovor