Skeleton
Skeleton componet used to indicate content and ui loading that will appear after its loaded. It helps to decrease perceived duration time
Usage
Import
npm i @finastra/skeleton
import '@finastra/skeleton';
...
<fds-skeleton></fds-skeleton>API
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
height |
height |
string |
Height of the skeleton | |
override |
||||
size |
size |
h1|h2|h3|h4|h5|h6|small|p |
"p" | Define the size of skeleton |
type |
type |
circle|text|rectangle |
"text" | Define the type of skeleton |
width |
width |
string |
Width of the skeleton |
Methods
| Method | Type |
|---|---|
updateHeight |
(): void |
updateWidth |
(): void |
willUpdate |
(_changedProperties: Map<string | number | symbol, unknown> | PropertyValueMap<any>): void |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--fds-skeleton-background |
"var(--fds-surface-selected)" | Background color of the skeleton. |
--fds-skeleton-height |
"162px" | Width of the skeleton |
--fds-skeleton-placeholder-color |
"var(--fds-on-surface-medium)" | Color of placeholder. |
--fds-skeleton-width |
"162px" | Height of the skeleton |