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

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

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.

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

Prilagođeni početni zaslon

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

Na kraju to izgleda ovako

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

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.

Objavio

Tomislav Stanković

Web Developer - JavaScript, TypeScript, Angular, Ionic Framework, ExpressJS

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *