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