Skeleton Elements for Svelte

Installation
Styles
Components
Custom Fonts
Loading Effects

Installation

You can install Skeleton Elements for Svelte 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/svelte';

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

SkeletonBlock Props

Name	Type	Default	Description
`tag`	`string`	`'div'`	HTML element tag, can be `div`, `p`, `h1`, `h2`, `h3`, `h4` or `span`
`width`	`string`		Block CSS width
`height`	`string`		Block CSS height
`borderRadius`	`string`		Block CSS border radius
`effect`	`string`		Loading effect, can be `fade` or `pulse` or `wave`

SkeletonText

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

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

Name	Type	Default	Description
`tag`	`string`	`'span'`	HTML element tag, can be `div`, `p`, `h1`, `h2`, `h3`, `h4` or `span`
`effect`	`string`		Loading effect, can be `fade` or `pulse` or `wave`

SkeletonAvatar

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

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

SkeletonAvatar Props

Name	Type	Default	Description
`size`	`number`	`48`	Generated SVG size in px.
`color`	`string`		CSS color, e.g. `#f00`, `rgba(255, 255, 0)`
`showIcon`	`boolean`	`true`	Defines whether to show icon or not
`iconColor`	`string`		Icon CSS color
`borderRadius`	`string`	`50%`	Avatar CSS border radius
`effect`	`string`		Loading effect, can be`fade`or`pulse`or`wave`

SkeletonImage

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

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

SkeletonImage Props

Name	Type	Default	Description
`width`	`number`	`1200`	SVG image width in px
`height`	`number`	`600`	SVG image height in px
`color`	`string`		CSS color, e.g. `#f00`, `rgba(255, 255, 0)`
`showIcon`	`boolean`	`true`	Defines whether to show icon or not
`iconColor`	`string`		Icon CSS color
`borderRadius`	`string`		CSS border radius
`effect`	`string`		Loading 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:

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 -->
<SkeletonBlock effect="pulse" />

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

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