@georapbox/skeleton-placeholder-element NPM

<skeleton-placeholder>

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

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.