/ionic-skeleton-loader-4

Ionic 4 Skeleton Loader and some examples

Primary LanguageTypeScriptMIT LicenseMIT

Ionic 4 Skeleton Loader component

Demo

StackBlitz

Setup

After clone or download this project.

Install Ionic CLI

$ npm install -g ionic

Install dependencies

$ cd <project>
$ npm install

Run the app on Localhost

$ ionic serve

See more at Get started with Ionic

skeleton-element

<skeleton-element> is the main building block to build more complex skeleton-style loading screen

Usage

<skeleton-element height="50px" width="50px" rounded="true"></skeleton-element>

You can add CSS classes or inline CSS as normal HTML element

<skeleton-element class="pin-image" height="50px" width="50px" rounded="true" style="margin-bottom: 16px"></skeleton-element>

Available attributes

  • @Input() width: string = '100%'; // can be px or %
  • @Input() height: string = '16px'; // can be px or %
  • @Input() borderRadius: string = '0'; // set border-radius
  • @Input() rounded: boolean = false; // set border-radius to 999em to make rounded block
  • @Input() noAnimated: boolean = false; // disable animation effect
  • @Input() inline: boolean = false; // set display to inline-block