Skip to content
Ionic 3 Skeleton Loader and some examples
HTML TypeScript 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.
resources Initial commit Jul 12, 2018
src feat: add skeleton-item and examples Jul 13, 2018
.editorconfig Initial commit Jul 12, 2018
.gitignore Initial commit Jul 12, 2018
LICENSE feat: add skeleton-item and examples Jul 13, 2018
README.md feat: add skeleton-item and examples Jul 13, 2018
config.xml Initial commit Jul 12, 2018
ionic.config.json Initial commit Jul 12, 2018
package-lock.json
package.json Initial commit Jul 12, 2018
tsconfig.json
tslint.json Initial commit Jul 12, 2018

README.md

Ionic 3 Skeleton Loader component

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-item

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

Usage

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

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

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

Available attributes

  • {height: string} can be px or %, default value is '16px'
  • {width: string} can be px or %, default value is '100%'
  • {radius: string} set border-radius, default value is '4px'
  • {rounded} set border-radius to 999em to make rounded block when the height and width have the same value
  • {no-animated} disable animation effect
You can’t perform that action at this time.