Skeleton Elements for Vue

Skeleton Elements Vue.js components are compatible only with new Vue.js version 3

Installation

You can install Skeleton Elements for Vue via npm:

npm i skeleton-elements --save

Styles

CSS

Skeleton Elements requires stylesheet to be included:

<link rel="stylesheet" href="path/to/skeleton-elements.css" />

With bundler (like webpack) you can import styles directly from JavaScript:

import 'skeleton-elements/skeleton-elements.css';

Or it can be included for each component separately:

SCSS

SCSS styles are also included:

CSS Custom Properties (Variables)

There are following CSS Variables available:

Components

There are following components available:

SkeletonBlock

import { SkeletonBlock } from 'skeleton-elements/vue';

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

SkeletonBlock Props

NameTypeDefaultDescription
tagstring'div'HTML element tag
widthstringBlock CSS width
heightstringBlock CSS height
borderRadiusstringBlock CSS border radius
effectstringLoading effect, can be fade or pulse or wave

SkeletonText

import { SkeletonText } from 'skeleton-elements/vue';

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 SkeletonBlock 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
tagstring'span'HTML element tag
effectstringLoading effect, can be fade or pulse or wave

SkeletonAvatar

import { SkeletonAvatar } from 'skeleton-elements/vue';

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

SkeletonAvatar Props

NameTypeDefaultDescription
tagstring'span'HTML element tag
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

import { SkeletonImage } from 'skeleton-elements/vue';

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
tagstring'span'HTML element tag
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

Custom Fonts

As mentioned above Skeleton Text support specific subset of Latin characters and numbers. In addition to this there are following language fonts available:

For example, to add Russian language support, register the font in your CSS:

@font-face {
  font-family: 'skeleton-ru';
  src: url('/path-to/skeleton-elements/fonts/skeleton-ru.woff2') format('woff2'),
    url('/path-to/skeleton-elements/fonts/skeleton-ru.woff') format('woff');
}

.skeleton-text-ru {
  font-family: 'skeleton-ru';
}

And then use in your layout along with skeleton-text class:

<div class="skeleton-text skeleton-text-ru">Текст на русском</div>

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 -->
<skeleton-text effect="fade">...</skeleton-text>

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