Ionic Skeleton Loader (Ionic 3)
Created on Aug 26, 2018

Introduction

Lately in one of my projects, I was looking for a short and simple solution for the trendy "Skeleton Screen" (or screen placeholder and so) and It was not easy to pick one. I ended up creating my own skeleton-item and I really liked the idea of reusing it anywhere, in any screens of my app. But please, don't be addicted like that or your users will leave your app soon.

Preview

Watch on Youtube

See how it works on Youtube:

(coming soon)

Happy prototyping!

Changelog

Note: All updates are on Ionic 3

Last updated: Jul 13 2018

Github Repository: https://github.com/mrhieu/ionic-skeleton-loader

Screens

  1. Skeleton Loader
  2. List
  3. Detail
  4. Facebook
  5. Pinterest
  6. Notification
  7. Table

Run locally

1.Install Ionic environment

$ npm install -g cordova
$ npm install -g @ionic/cli@6.8.0

2.After purchasing, download the zip file containing the entire demo app and unzip

3.Go inside the extracted folder

4.Install all dependencies

$ npm install

5.Start local server

$ ionic serve

6.Your default browser should now automatically open the template

Notes

Read more at README

Build with capacitor

First of all, make sure that you can Run Locally (see the instruction above).

# build web asset (to folder www)
$ ionic build

# add platform (ios or android)
$ ionic capacitor add ios

# prepare app icons and splash images
$ npm run resources

# copy web assets into the native project
$ ionic capacitor copy ios

# open Xcode, then build the native app from there
$ ionic capacitor open ios

# OR run in live-reload mode
$ ionic capacitor run ios -l --external

See more:

Ionic - iOS Development

Ionic - Android Development

Migrating a Web App Using Cordova to Capacitor

Contact

If you need technical support or have any questions, don't hesitate to send me a message: mr_hie@yahoo.com

Homepage: https://www.takethatdesign.com

<StartOfPromotion>

[PROMO] Ionic 4 Bundle: 4 in 1 - Best Seller

My best Ionic 4 products (3 themes + 1 plugin) are now on sale with promotion code BUNDLE4. Please click the button below for more information.

Purchase Externally

</EndOfPromotion>

More Like This