Skeleton
Overview#
Allows you to display a loading state for several component types while your data is being fetched or computed.
Examples#
- Web Component
- React
- Angular
<uxf-skeleton width="90%" variant="primary"></uxf-skeleton> <uxf-skeleton width="60%" variant="warning"></uxf-skeleton> <uxf-skeleton width="70%" variant="danger"></uxf-skeleton><UxfSkeleton variant="primary" width="90%"></UxfSkeleton><UxfSkeleton variant="warning" width="60%"></UxfSkeleton><UxfSkeleton variant="danger" width="70%"></UxfSkeleton> <uxf-skeleton width="90%" variant="primary"></uxf-skeleton> <uxf-skeleton width="60%" variant="warning"></uxf-skeleton> <uxf-skeleton width="70%" variant="danger"></uxf-skeleton>Types#
Supports various basic types, to represent various components in your project.
Text (default)#
Input#
Button#
Avatar#
Image#
- Web Component
- React
- Angular
<uxf-skeleton></uxf-skeleton> <uxf-skeleton type="input" width="50%"></uxf-skeleton> <uxf-skeleton type="button" width="30%"></uxf-skeleton> <uxf-skeleton type="avatar" size="160px"></uxf-skeleton> <uxf-skeleton type="image" width="300px" height="200px"></uxf-skeleton> <UxfSkeleton></UxfSkeleton> <UxfSkeleton type="input" width="50%"></UxfSkeleton> <UxfSkeleton type="button" width="30%"></UxfSkeleton> <UxfSkeleton type="avatar" size="160px"></UxfSkeleton> <UxfSkeleton type="image" width="300px" height="200px"></UxfSkeleton> <uxf-skeleton></uxf-skeleton> <uxf-skeleton type="input" width="50%"></uxf-skeleton> <uxf-skeleton type="button" width="30%"></uxf-skeleton> <uxf-skeleton type="avatar" size="160px"></uxf-skeleton> <uxf-skeleton type="image" width="300px" height="200px"></uxf-skeleton>Card#
By combining multiple types of skeletons you can represent a loading state for a card component.
- Web Component
- React
- Angular
<uxf-card> <uxf-skeleton type="image" variant="success" animation="wave" ></uxf-skeleton> <uxf-card-body> <uxf-card-body> <uxf-skeleton variant="dark" width="50%"></uxf-skeleton> </uxf-card-body> <uxf-skeleton width="70%"></uxf-skeleton> <uxf-skeleton width="90%"></uxf-skeleton> <uxf-skeleton width="40%"></uxf-skeleton> </uxf-card-body> <uxf-card-footer> <uxf-skeleton type="button" animation="wave"></uxf-skeleton> </uxf-card-footer></uxf-card> <UxfCard> <UxfSkeleton type="image" variant="success" animation="wave" ></UxfSkeleton> <UxfCardBody> <UxfCardTitle> <UxfSkeleton variant="dark" width="50%"></UxfSkeleton> </UxfCardTitle> <UxfSkeleton width="70%"></UxfSkeleton> <UxfSkeleton width="90%"></UxfSkeleton> <UxfSkeleton width="40%"></UxfSkeleton> </UxfCardBody> <UxfCardFooter> <UxfSkeleton type="button" animation="wave"></UxfSkeleton> </UxfCardFooter> </UxfCard><uxf-card> <uxf-skeleton type="image" variant="success" animation="wave" ></uxf-skeleton> <uxf-card-body> <uxf-card-body> <uxf-skeleton variant="dark" width="50%"></uxf-skeleton> </uxf-card-body> <uxf-skeleton width="70%"></uxf-skeleton> <uxf-skeleton width="90%"></uxf-skeleton> <uxf-skeleton width="40%"></uxf-skeleton> </uxf-card-body> <uxf-card-footer> <uxf-skeleton type="button" animation="wave"></uxf-skeleton> </uxf-card-footer></uxf-card>Animations#
Glow (default)#
Wave#
- Web Component
- React
- Angular
<uxf-skeleton></uxf-skeleton> <uxf-skeleton type="input" width="50%"></uxf-skeleton> <uxf-skeleton type="button" width="30%"></uxf-skeleton> <uxf-skeleton type="avatar" size="160px"></uxf-skeleton> <uxf-skeleton type="image" width="300px" height="200px"></uxf-skeleton> <UxfSkeleton></UxfSkeleton> <UxfSkeleton type="input" width="50%"></UxfSkeleton> <UxfSkeleton type="button" width="30%"></UxfSkeleton> <UxfSkeleton type="avatar" size="160px"></UxfSkeleton> <UxfSkeleton type="image" width="300px" height="200px"></UxfSkeleton> <uxf-skeleton></uxf-skeleton> <uxf-skeleton type="input" width="50%"></uxf-skeleton> <uxf-skeleton type="button" width="30%"></uxf-skeleton> <uxf-skeleton type="avatar" size="160px"></uxf-skeleton> <uxf-skeleton type="image" width="300px" height="200px"></uxf-skeleton>Colors#
- Web Component
- React
- Angular
<uxf-skeleton variant="primary"></uxf-skeleton> <uxf-skeleton variant="secondary"></uxf-skeleton> <uxf-skeleton variant="success"></uxf-skeleton> <uxf-skeleton variant="info"></uxf-skeleton> <uxf-skeleton variant="warning"></uxf-skeleton> <uxf-skeleton variant="danger"></uxf-skeleton> <uxf-skeleton variant="dark"></uxf-skeleton> <uxf-skeleton variant="light"></uxf-skeleton> <UxfSkeleton variant="primary"></UxfSkeleton> <UxfSkeleton variant="secondary"></UxfSkeleton> <UxfSkeleton variant="success"></UxfSkeleton> <UxfSkeleton variant="info"></UxfSkeleton> <UxfSkeleton variant="warning"></UxfSkeleton> <UxfSkeleton variant="danger"></UxfSkeleton> <UxfSkeleton variant="dark"></UxfSkeleton> <UxfSkeleton variant="light"></UxfSkeleton> <uxf-skeleton variant="primary"></uxf-skeleton> <uxf-skeleton variant="secondary"></uxf-skeleton> <uxf-skeleton variant="success"></uxf-skeleton> <uxf-skeleton variant="info"></uxf-skeleton> <uxf-skeleton variant="warning"></uxf-skeleton> <uxf-skeleton variant="danger"></uxf-skeleton> <uxf-skeleton variant="dark"></uxf-skeleton> <uxf-skeleton variant="light"></uxf-skeleton>Image#
It utilizes a 16:9 aspect ratio by default, for a responsive sizing. You can overwrite this by applying aspect="none" and utilize the height and width props to set your own sizing.
- Web Component
- React
- Angular
<uxf-skeleton type="image" aspect="21x9" width="80%"></uxf-skeleton> <uxf-skeleton type="image" aspect="4x3" width="40%"></uxf-skeleton> <uxf-skeleton type="image" height="200px" aspect="none"></uxf-skeleton>
<UxfSkeleton type="image" aspect="21x9" width="80%"></UxfSkeleton> <UxfSkeleton type="image" aspect="4x3" width="40%"></UxfSkeleton> <UxfSkeleton type="image" height="200px"></UxfSkeleton> <uxf-skeleton type="image" aspect="21x9" width="80%"></uxf-skeleton> <uxf-skeleton type="image" aspect="4x3" width="40%"></uxf-skeleton> <uxf-skeleton type="image" height="200px" aspect="none"></uxf-skeleton>
Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
animation | animation | string | "glow" | |
aspect | aspect | string | "16x9" | |
height | height | string | undefined | |
size | size | string | "200px" | |
type | type | string | "text" | |
variant | variant | string | "none" | |
width | width | string | "100%" |