A Series of Web Components that you can create in Angular and avoid having to import a whole library for it. In this post I’ll be creating a simple, yet sleek way to add a splash screen for your Angular Web Apps and PWAs (Progressive Web Apps) and avoid your users having to stare at a blank screen while your site / mobile app loads.

I hate staring at a page or web app while it loads piece by piece. I’d rather have a nice and graceful introduction into the page by having a nice splash screen. This splash screen approach is more common for mobile native apps, but with web apps and PWAs becoming first-class citizens, some of these paradigms are also being adopted on the web.

Pretty much in every Angular web app and PWA based on Angular I’ve built so far I’ve integrated a splash screen into it since my web apps are behaving more like a mobile app and less like a webpage, therefore I’ve put together this post just to share how I’ve done it and how I’ve been able to do it in a very simple way without having to import external libraries just for a simple splash screen.

#css-animation #splash-screen #web-app-development #pwa #angular #css