Skeleton Elements for Angular

Installation

You can install Skeleton Elements for Angular via npm:

npm i skeleton-elements --save

Styles

SCSS

List of SCSS files in the bundle:

Include css in to your styles.scss or in .angular-cli.json (Angular v5 and below) / angular.json (Angular v6 onwards).

@import '~skeleton-elements/skeleton-elements';

Or you can import only components that you need:

@import '~skeleton-elements/skeleton-avatar';
@import '~skeleton-elements/skeleton-block';
@import '~skeleton-elements/skeleton-image';
@import '~skeleton-elements/skeleton-text';
@import '~skeleton-elements/skeleton-effect';

CSS Custom Properties (Variables)

There are following CSS Variables available:

Import module

import { SkeletonElementsModule } from 'skeleton-elements/angular';

@NgModule({
  declarations: [AppComponent],
  imports: [SkeletonElementsModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Components

There are following components available:

SkeletonBlock

<!-- use it as component -->
<skeleton-block width="30%" height="0.75em" effect="pulse"></skeleton-block>
<!-- or as directive -->
<section skeleton-block width="30%" height="0.75em" effect="pulse"></section>

Skeleton block is just a usual block element with gray background color, that can be in any required size.

SkeletonBlockComponent Props

NameTypeDefaultDescription
widthstringBlock CSS width
heightstringBlock CSS height
borderRadiusstringBlock CSS border radius
effectstringLoading effect, can be fade or pulse or wave

SkeletonText

<!-- use it as directive -->
<p skeleton-text effect="pulse">Placeholder text</p>
<h1 skeleton-text effect="wave">Placeholder text</h1>

Skeleton text uses custom Skeleton font for making responsive text placeholders.

Special Skeleton font renders every character as small gray rectangle. When we wrap text with SkeletonText component, it converts text to gray blocks/lines. Advantage over SkeletonBlockComponent is that such "skeleton text" can be fully responsive and its size will reflect actual text size.

Skeleton text font supports following characters set (including "space"):

0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z _ -   . , : ; / ! / * & ' " | ( ) { } [ ]

SkeletonText Props

NameTypeDefaultDescription
effectstringLoading effect, can be fade or pulse or wave

SkeletonAvatar

<!-- use it as component -->
<skeleton-avatar size="100"></skeleton-avatar>
<!-- or as directive -->
<article skeleton-avatar size="100"></article>

Skeleton Avatar is designed to be used as a placeholder for avatars. It dynamically renders SVG image with "person" icon inside:

SkeletonAvatar Props

NameTypeDefaultDescription
sizenumber48Generated SVG size in px.
colorstringCSS color, e.g. #f00, rgba(255, 255, 0)
showIconbooleantrueDefines whether to show icon or not
iconColorstringIcon CSS color
borderRadiusstring50%Avatar CSS border radius
effectstringLoading effect, can befadeorpulseorwave

SkeletonImage

<!-- use it as component -->
<skeleton-image effect="wave" width="400" height="200"></skeleton-image>
<!-- or as directive -->
<div skeleton-image effect="wave" width="400" height="200"></div>

Skeleton Image is designed to be used as a placeholder for images. It dynamically renders rectangle SVG image with "image" icon inside:

SkeletonImage Props

NameTypeDefaultDescription
widthnumber1200SVG image width in px
heightnumber600SVG image height in px
colorstringCSS color, e.g. #f00, rgba(255, 255, 0)
showIconbooleantrueDefines whether to show icon or not
iconColorstringIcon CSS color
borderRadiusstringCSS border radius
effectstringLoading effect, can be fade or pulse or wave

Loading Effects

There are following loading effects available:

To add loading effect in Skeleton components, pass effect name in effect prop. For anything else, just add skeleton-effect-${effectName} class to elements.

<!-- skeleton block with "pulse" loading effect -->
<skeleton-block effect="pulse" />

<!-- skeleton text with "fade" loading effect -->
<p skeleton-text effect="fade">...</p>

<!-- custom block with "wave" loading effect -->
<div class="skeleton-effect-wave">
  <h1 skeleton-text tag="h1">...</h1>
  <h2 skeleton-text tag="h2">...</h2>
  <p skeleton-text tag="p">...</p>
  <p skeleton-text>...</p>
  <skeleton-block>...</skeleton-block>
</div>