Skip to content

mrhieu/ionic-skeleton-loader

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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