Skeleton Elements for Vue

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

• Installation
• Styles
  • CSS
  • SCSS
  • CSS Custom Properties (Variables)
• Components
  • SkeletonBlock
  • SkeletonText
  • SkeletonAvatar
  • SkeletonImage
• Custom Fonts
• Loading Effects

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:

• skeleton-elements/skeleton-avatar.css - Avatar component
• skeleton-elements/skeleton-block.css - Block component
• skeleton-elements/skeleton-image.css - Image component
• skeleton-elements/skeleton-text.css - Text component
• skeleton-elements/skeleton-effect.css - Effects

SCSS

SCSS styles are also included:

• skeleton-elements/skeleton-elements.scss - All styles
• skeleton-elements/skeleton-avatar.scss - Avatar component
• skeleton-elements/skeleton-block.scss - Block component
• skeleton-elements/skeleton-image.scss - Image component
• skeleton-elements/skeleton-text.scss - Text component
• skeleton-elements/skeleton-effect.scss - Effects

CSS Custom Properties (Variables)

There are following CSS Variables available:

• --skeleton-color (default #ccc) - used as text color for skeleton text, and background color of skeleton block, avatar and image
• --skeleton-icon-color (default rgba(0, 0, 0, 0.25)) - used as icon color in skeleton avatar and image

Components

There are following components available:

• SkeletonBlock - block placeholder
• SkeletonText - skeleton text (uses custom Skeleton font)
• SkeletonAvatar - responsive avatar placeholder
• SkeletonImage - responsive image placeholder

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

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

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

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

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:

• skeleton-elements/fonts/skeleton-ar.(ttf|woff|woff2) - font containing Arabic characters
• skeleton-elements/fonts/skeleton-fa.(ttf|woff|woff2) - font containing Farsi characters
• skeleton-elements/fonts/skeleton-il.(ttf|woff|woff2) - font containing Hebrew (Israel) characters
• skeleton-elements/fonts/skeleton-ru.(ttf|woff|woff2) - font containing Russian (Cyrillic) characters

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:

• pulse
• fade
• wave

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>