This component is the placeholder for any type of text that is loaded dynamically from the server. It works for paragraph text by replacing a <p> element, but also for headings by replacing <h1> to <h6> elements.
sk-loader-text is highly adaptable. It inherits the font size of the parent element and uses it to compute its height. This is done in order to mimic the final loaded text size as close as possible. It behaves like a block element, so it expands the full width of the parent. Also if it has more rows, the last row will be shorter in width to replicate realistic text length for the last line of text. And to be more realistic, each row has a dynamically computed width. So on each reload, it will generate a different skeleton shape for the unloaded text.
This component is also highly customizable by having a lot of properties and css variables made just for changing the final appearance of the loader.
Example
Properties
rows
| Description | The number of rows (skeleton-bars). |
|---|
| Attribute | rows |
|---|
| Type | number |
|---|
| Default | 1 |
|---|
default
rows="3"
align
| Description | The alignment of the bars relative to parent. |
|---|
| Attribute | align |
|---|
| Type | 'left' | 'center' | 'right' |
|---|
| Default | 'left' |
|---|
default
align="center"
align="right"
indent
| Description | If true, the first row will have identation space on the left for align="left" and on the right for align="right". For align="center" identation is not applicable. |
|---|
| Attribute | indent |
|---|
| Type | boolean |
|---|
| Default | false |
|---|
default
indent="true"
animated
| Description | If true, the bar is animated with a wave effect. |
|---|
| Attribute | animated |
|---|
| Type | boolean |
|---|
| Default | true |
|---|
default
animated="false"
CSS Custom Variables
| CSS Variable | Default Value | Description |
|---|
--sk-loader-background | #dddddd | The background color of the skeleton bars |
--sk-loader-highlight-color | rgba(255, 255, 255, 0.6) | The color of the moving highlight for the wave effect |
--sk-loader-highlight | rgba(255, 255, 255, 0),
var(--sk-loader-highlight-color),
rgba(255, 255, 255, 0) | The gradient of the moving highlight for the wave effect |
--sk-loader-animation-time | 2s | The time of the animation for the wave effect |
--sk-loader-border-radius | 0.3em | The border radius of the skeleton bars |
sharp border-radius
faster animation-time
dark theme