# xpl-skeleton

Skeleton components are progress indicators used for full page loading states that reduce the perception of long loading times and provide both reassurance to the user as well as clues for how the page will ultimately look. 

Includes:
Components - Text, Shape, Data
Variants - Text: Display, Title, Body  Shape: rectangle, pill, circle, square
Properties - Text/Body: show 1, 2 or 3 lines

**Note: The “shimmer” effect uses Tailwind’s `animated-pulse` for the duration skeletons are present. The [animated pulse](https://tailwindcss.com/docs/animation#adding-a-pulse-animation) animates the color between our `color-background-surface-transparent-10` and `color-background-surface-transparent-5` variables. 


<!-- Auto Generated Below -->


## Properties

| Property     | Attribute     | Description                                                                                    | Type                                                                                               | Default       |
| ------------ | ------------- | ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ------------- |
| `classNames` | `class-names` | A CSS class name to apply to the component.                                                    | `string`                                                                                           | `undefined`   |
| `fullWidth`  | `full-width`  | If true, the skeleton will take up the full width of its container.                            | `boolean`                                                                                          | `undefined`   |
| `height`     | `height`      | The height of the skeleton. (e.g. '100px', '100%', 'auto') accepts any valid CSS height value  | `string`                                                                                           | `undefined`   |
| `margin`     | `margin`      | The margin of the skeleton. (e.g. '10px', '1rem', '1rem 0') accepts any valid CSS margin value | `string`                                                                                           | `undefined`   |
| `shape`      | `shape`       | The shape of the skeleton.                                                                     | `"circle" \| "rectangle" \| "square"`                                                              | `'rectangle'` |
| `size`       | `size`        | The predefined size of the skeleton.                                                           | `"body" \| "custom" \| "display" \| "title-1" \| "title-2" \| "title-3" \| "title-4" \| "title-5"` | `'custom'`    |
| `width`      | `width`       | The width of the skeleton. (e.g. '100px', '100%', 'auto') accepts any valid CSS width value    | `string`                                                                                           | `undefined`   |


----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*