Skip to content
Ionic 4 Skeleton Loader and some examples
TypeScript HTML CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e
resources
src
.gitignore
LICENSE
README.md
angular.json
browserslist
config.xml
ionic.config.json
karma.conf.js
package-lock.json
package.json
tsconfig.app.json
tsconfig.json
tsconfig.spec.json
tslint.json

README.md

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
You can’t perform that action at this time.