<uxl-ui-skeleton>
An ui skeleton component
Install the Polymer-CLI
First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install to install your element's dependencies, then run serve to serve your element locally.
Viewing Your Element
$ npm run serve
Description
<uxl-ui-skeleton> is a component that provides different types of ui skeletons to display when a petitions is fetching, for example:
Properties
| Property | Attribute | Type | Default |
|---|---|---|---|
animation |
animation |
skeletonAnimation |
"intermitent" |
classifier |
classifier |
string |
required |
number |
number |
string |
required |
type |
type |
skeletonType |
required |
number: the number of elements that will display the skeleton
animation: the animation type, available: intermitent | disabled
type: choose between different skeleton types, available: list | single
classifier: provide a classifier to display different layouts, for example: vertical | horizontal
CSS Shadow Parts
| Part | Description |
|---|---|
item |
item container |
item__body |
item body |
item__header |
item header |
wrapper |
List wrapper |
CSS Custom properties
The following custom properties and mixins are available for styling:
| Custom property | Description | Default |
|---|---|---|
--uxl-ui-skeleton-primary-color |
The background color of the items header | #e4e3e3 |
--uxl-ui-skeleton-secondary-color |
The background color of the items body | #f1f1f1 |
--uxl-ui-skeleton-opacity |
The opacity of skeleton items | 1 |