Skeleton Thumbnail
<ahi-skeleton-thumbnail> | AhiSkeletonThumbnail
Skeleton thumbnails are used to provide a low fidelity representation of an image before it appears on the page, and improves load times perceived by users. Use for thumbnails and avatars in our outside of card.
<ahi-skeleton-thumbnail></ahi-skeleton-thumbnail>
Examples
Sizes
Extra small
Thumbnails can be size using the size attribute.
<ahi-skeleton-thumbnail size="extraSmall"></ahi-skeleton-thumbnail>
<ahi-skeleton-thumbnail size="small"></ahi-skeleton-thumbnail>
<ahi-skeleton-thumbnail size="medium"></ahi-skeleton-thumbnail>
<ahi-skeleton-thumbnail size="large"></ahi-skeleton-thumbnail>
Shapes
Thumbnails can be shaped using the shape attribute.
<ahi-skeleton-thumbnail shape="circle"></ahi-skeleton-thumbnail>
<ahi-skeleton-thumbnail shape="rounded"></ahi-skeleton-thumbnail>
<ahi-skeleton-thumbnail shape="square"></ahi-skeleton-thumbnail>
Best practices
Skeleton thumbnails should:
- Try to match the size and shape of the thumbnail to the content being loaded so it gives an accurate representation.
Related components
- Use this component with Skeleton body text and Skeleton display text to represent the content of a card while it’s loading.
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/skeleton-thumbnail/skeleton-thumbnail.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/skeleton-thumbnail/skeleton-thumbnail.js';Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
size
|
Size of the thumbnail. |
'extraSmall' | 'small' | 'medium' | 'large'
|
'medium'
|
|
effect
|
Determines which effect the skeleton will use. |
'pulse' | 'sheen' | 'none'
|
'sheen'
|
|
shape
|
The shape of the thumbnail. |
'circle' | 'square' | 'rounded'
|
'rounded'
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about properties and attributes.
CSS Parts
| Name | Description |
|---|---|
base |
Deprecated. Use the skeleton-thumbnail part instead. |
skeleton-thumbnail |
The component’s outer wrapper. |
indicator |
The skeleton’s indicator which is responsible for it’s color. |
Learn more about customizing CSS parts.