Skip to content
🛎 Learn the importance of adopting the App Shell pattern in your ionic apps and how to implement it using Ionic 4 + Angular 7 and some advanced CSS techniques.
TypeScript CSS HTML JavaScript
Branch: master
Clone or download
Latest commit 5a3b983 Apr 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e Initial commit Mar 12, 2019
src feat: add transparent background text-shell demos Mar 15, 2019
.firebaserc deploy demo to firebase Mar 18, 2019
.gitignore update .gitignore Mar 21, 2019
LICENSE Initial commit Mar 12, 2019
README.md Update README.md Apr 11, 2019
angular.json Initial commit Mar 12, 2019
firebase.json deploy demo to firebase Mar 18, 2019
ionic.config.json Initial commit Mar 12, 2019
package-lock.json Initial commit Mar 12, 2019
package.json Initial commit Mar 12, 2019
tsconfig.json Initial commit Mar 12, 2019
tslint.json Initial commit Mar 12, 2019

README.md

Improved UX for Ionic apps with Skeleton Loading Screens

About this ionic 4 starter

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.

In this ionic 4 tutorial, you will learn the importance of adopting the App Shell pattern in your ionic apps and discuss how to implement it using Ionic 4 + Angular 7 and some advanced CSS techniques.

This repo is the code of an Ionic 4 starter app that we created as part of a Ionic Skeleton Animations guide.

Start with Ionic 4

This post is part of the Mastering Ionic 4 series which deep dives into Ionic 4 more advanced stuff. Don’t be afraid, if you are new to Ionic 4, I strongly recommend you to first read our previous introductory ionic 4 tutorial

Install this Ionic 4 starter app

npm install

Browse Ionic 4 app

ionic serve

Demo

https://ionic-4-app-shell.firebaseapp.com/home

Free Ionic Examples

Find more Ionic 4 tutorials and starter apps in https://ionicthemes.com

Get a premium Ionic 4 Starter App

The following skeleton animations are part of our latest Ionic 4 Full Starter App. It’s an ionic 4 starter 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!

You can’t perform that action at this time.