Create a custom loading screen in your Angular app

Опубликовано: 03 Ноябрь 2024
на канале: Brian Treese
1,490
73

If you've built apps in Angular in the past, I'm sure you've experienced the blank screen while you wait for the app to be bootstrapped. In smaller applications, it's not as noticeable but in larger, more complex applications, we may need to wait for a little bit before we see the actual content loaded. And staring at a blank screen while we wait is not ideal. Well, we can upgrade this experience by adding our own custom loading screen and it's pretty easy to do too. In this video that's exactly what we're going to do.

------------------------------------------------------------------------------

👕 Be the coolest developer in the room with these Angular tees! (https://www.teepublic.com/user/dev-drip)

------------------------------------------------------------------------------

🔗 Demo Links:
Before (https://stackblitz.com/edit/stackblit...)
After (https://stackblitz.com/edit/stackblit...)

------------------------------------------------------------------------------
📚 Additional Resources:
Angular Animations Playlist (   • Angular Animations  )

------------------------------------------------------------------------------

📖 Chapters:
0:00 – Introduction
0:38 – How to Keep the Loading Screen Visible During Development
1:11 – Adding Markup and Styles for a More Captivating Loading Screen
2:50 – Adding a Basic Enter Animation to Your Component Content
4:47 – Conclusion

------------------------------------------------------------------------------

#angular #angulartutorial #angulartraining