You have unlimited access as a PRO member
You are receiving a free preview of 3 lessons
Your free preview as expired - please upgrade to PRO
- Object Oriented Programming With TypeScript
- Angular Elements Advanced Techniques
- TypeScript - the Basics
- Cloud Scheduler for Firebase Functions
- Testing Firestore Security Rules With the Emulator
- How to Use Git and Github
- Infinite Virtual Scroll With the Angular CDK
- Build a Group Chat With Firestore
- Async Await Pro Tips
Customize the Initial Loading Screen in Angularwritten by Jeff Delaney
By default, Angular gives you the loading… text nested inside the
app-root during bootstrap. For a polished production app you’re going to want something a little more fancy. There are different ways to achieve this, but I’m going provide a quick recipe using only CSS.
The idea is to create fixed div will cover 100% of the screen while the root component is empty. The CSS pseudo selector
:empty can be used display some static loading content.
First, delete the loading… text from the the app-root if it’s still there. Then, add the HTML you want to display before the app loads.
Then create a style that fills the entire viewport, but only when the app-root is empty.
It should only take a second or two to bootstrap your app, so you you should make the loading splash page clear and concise - design it like an iOS app loading screen.
The loading container will hold the content, with it’s opacity set to 1 only when the app-root is empty. I also added a CSS transition to give it a subtle fade effect when loading is complete. This is a good place to add some CSS loading animation, such as SpinKit.