fc-skeleton

Placeholder for waiting for content to be loaded.

Usage

<script>
   import '@forter/skeleton';
</script>

<fc-skeleton>
</fc-skeleton>

Properties

| Property | Attribute | Type | Default | Description | |---------------|---------------|--------------------------------------------------|---------|----------------------------------------------| | columns | columns | number | 2 | Numbers of columns to display in table type. | | duplication | duplication | number | 2 | Numbers of cards to duplicate. | | type | type | "line" \| "circle" \| "block" \| "card" \| "line-chart" \| "pie-chart" \| "bar-chart" | "line" | Skeleton loader type. |

CSS Custom Properties

| Property | Description | |------------------------------------------|--------------------------------------------------| | --fc-skeleton-animation-duration | skeleton animation duration in seconds. default: 10s | | --fc-skeleton-base-color | skeleton base color. default: #f6f7f8 | | --fc-skeleton-block-height | block skeleton's height. default: 80px | | --fc-skeleton-border-radius | line border radius. default: 2px | | --fc-skeleton-line-height | line skeleton's height. default: 10px | | --fc-skeleton-margin-bottom | line margin bottom. default: 12px | | --fc-skeleton-margin-top | line margin top. default: 5px | | --fc-skeleton-pulse-color | skeleton pulse color. default: #edeef1 | | --fc-skeleton-table-body-base-color | table skeleton's body base color. default: var(--fc-gray-200) | | --fc-skeleton-table-header-base-color | table skeleton's header base color. default: var(--fc-gray-300) | | --fc-skeleton-table-header-height | table skeleton's header height. default: 50px | | --fc-skeleton-table-header-pulse-color | table skeleton's header pulse color. default: var(--fc-gray-400) |