@georapbox/skeleton-placeholder-element

<skeleton-placeholder>

A custom element that acts as a placeholder to indicate that some content will eventually be rendered.

API documentation • Demo

Install

$ npm install --save @georapbox/skeleton-placeholder-element

Usage

Script

import { SkeletonPlaceholder } from './node_modules/@georapbox/skeleton-placeholder-element/dist/skeleton-placeholder.js';

// Manually define the element.
SkeletonPlaceholder.defineCustomElement();

Alternatively, you can import the automatically defined custom element.

import './node_modules/@georapbox/skeleton-placeholder-element/dist/skeleton-placeholder-defined.js';

Markup

<skeleton-placeholder effect="wave" variant="pill"></skeleton-placeholder>

API

Properties

Name	Reflects	Type	Default	Description
effect	✓	'none' | 'wave' | 'fade'	'none'	Optional. Determines the animation effect the skeleton element will use.
variant	✓	'circle' | 'rect' | 'pill'	null	Optional. Determines the skeleton's variations. This is just a set of predefined border-radius values. For more flexibility, you can use the --border-radius custom CSS property.

All of the above properties reflect their values as HTML attributes to keep the element's DOM representation in sync with its JavaScript state.

Slots

Name	Description
(default)	It can be used in the rare scenario that you might need to render something inside the placeholder element, such as an image, etc. Check the slot example demo.

CSS Parts

Name	Description
wrapper	The skeleton's internal wrapper element.
placeholder	The skeleton's placeholder element.

CSS Custom Properties

Name	Description
--border-radius	The element's border radius.
--color	The color of the element.
--wave-color	The color of the wave effect.

Changelog

For API updates and breaking changes, check the CHANGELOG.

Browser support

Browsers without native custom element support require a polyfill.

• Firefox
• Chrome
• Microsoft Edge
• Safari

License

The MIT License (MIT)