ionicthemes / improved-ux-for-ionic-apps-with-skeleton-loading-screens

🛎 Learn the importance of adopting the App Shell pattern in your ionic apps and how to implement it using Ionic and Angular and some advanced CSS techniques.

Improved UX for Ionic apps with Skeleton Loading Screens

Ionic Free Starter App

UI Skeletons, Ghost Elements, Shell Elements? They are all the same! Think of them as cool content placeholders that are shown where the content will eventually be once it becomes available.

This repo is part of Ionic Skeleton Components Tutorial where you will learn the importance of adopting the App Shell pattern in your ionic apps. Also, you will learn how to add Skeleton components to your Ionic Angular apps.

Start with Ionic Framework

This post is part of the Mastering Ionic Framework series which deep dives into Ionic more advanced stuff. If you are new to Ionic Framwork, I strongly recommend you to first read our previous introductory ionic 5 tutorial

Install this Ionic free starter app

npm install

Browse the Ionic App

ionic serve

Demo

Try this app.

Free Ionic Examples

Find more Ionic 5 tutorials and freebies in IonicThemes.

Get a premium Ionic 5 Starter App

The following skeleton animations are part of our latest Ionic 5 Full Starter App. It's an ionic template that you can use to jump start your app development and save yourself hundreds of hours of design and development.

It also has lots of practical use cases you can use to learn Ionic Framework!