<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. |
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