In a previous post, I designed a loading animation for a login page using just CSS. For simple scenarios, this works well, but in more complex apps you'll want to use code to control your animations. In this post we'll mix code-based and CSS-based animations in Nativescript for better control flow.

My previous post showed how to create a Nativescript app with a custom splashscreen. This works well except on the iPhone X, where you'll have a white bar on the bottom of your screen. I'll go over some basics for developers new to iOS with Nativescript and then discuss the iPhone X fix in detail.

For mobile apps, a splashscreen and loading animation will make loading look and feel nicer, and hide some processing for a complex app. Luckily, Nativescript makes both easy to implement. In this post, I'll show how to create a new mobile app with a splashscreen, loading animation and login page.