https://github.com/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.
https://github.com/ionicthemes/improved-ux-for-ionic-apps-with-skeleton-loading-screens

angular app-shell ionic-angular ionic-apps ionic-framework ionic-skeleton ionic-starter loading-animations skeleton-screen

Last synced: about 1 month ago
JSON representation

🛎 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.

• Host: GitHub
• URL: https://github.com/ionicthemes/improved-ux-for-ionic-apps-with-skeleton-loading-screens
• Owner: ionicthemes
• License: mit
• Created: 2019-03-12T18:30:45.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-02-02T02:25:56.000Z (almost 2 years ago)
• Last Synced: 2024-04-10T16:41:46.362Z (9 months ago)
• Topics: angular, app-shell, ionic-angular, ionic-apps, ionic-framework, ionic-skeleton, ionic-starter, loading-animations, skeleton-screen
• Language: TypeScript
• Homepage: https://ionicthemes.com/tutorials/about/improved-ux-for-ionic-apps-with-skeleton-loading-screens
• Size: 1.4 MB
• Stars: 29
• Watchers: 2
• Forks: 20
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## 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](https://ionicthemes.com/tutorials/about/improved-ux-for-ionic-apps-with-skeleton-loading-screens) 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](https://ionicthemes.com/tutorials/about/ionic5-tutorial-migration-and-starter)

### Install this Ionic free starter app

```

npm install

```

### Browse the Ionic App

```

ionic serve

```

### Demo

[Try this app](https://ionic-4-app-shell.firebaseapp.com/home).

### Free Ionic Examples

Find more Ionic 5 tutorials and freebies in [IonicThemes](https://ionicthemes.com/tutorials).

### Get a premium Ionic 5 Starter App

The following skeleton animations are part of our latest [Ionic 5 Full Starter App](https://ionicthemes.com/product/ionic5-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!