Components

sk-loader • version 2.1.2

sk-loader-text

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

DescriptionThe number of rows (skeleton-bars).
Attributerows
Typenumber
Default1

default

rows="3"

align

DescriptionThe alignment of the bars relative to parent.
Attributealign
Type'left' | 'center' | 'right'
Default'left'

default

align="center"

align="right"

indent

DescriptionIf 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.
Attributeindent
Typeboolean
Defaultfalse

default

indent="true"

animated

DescriptionIf true, the bar is animated with a wave effect.
Attributeanimated
Typeboolean
Defaulttrue

default

animated="false"

CSS Custom Variables

CSS VariableDefault ValueDescription
--sk-loader-background#ddddddThe background color of the skeleton bars
--sk-loader-highlight-colorrgba(255, 255, 255, 0.6)The color of the moving highlight for the wave effect
--sk-loader-highlightrgba(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-time2sThe time of the animation for the wave effect
--sk-loader-border-radius0.3emThe border radius of the skeleton bars

sharp border-radius

faster animation-time

dark theme

sk-loader-image

This component is the placeholder for an image that is loaded dynamically from the server. It works for any size of image by replacing an <img> element.

sk-loader-image is highly adaptable. It inherits the size of the parent element and expands to its full height and full width. This is done in order to mimic the final loaded image size as close as possible. You can overwrite this behaviour by adding specific style on this element for defining the desired width and height.

This component is also highly customizable by having properties and css variables made just for changing the final appearance of the loader.

Example

Properties

animated

DescriptionIf true, the bar is animated with a wave effect.
Attributeanimated
Typeboolean
Defaulttrue

default

animated="false"

CSS Custom Variables

CSS VariableDefault ValueDescription
--sk-loader-background#ddddddThe background color of the skeleton bars
--sk-loader-highlight-colorrgba(255, 255, 255, 0.6)The color of the moving highlight for the wave effect
--sk-loader-highlightrgba(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-time2sThe time of the animation for the wave effect
--sk-loader-border-radius0.3emThe border radius of the skeleton bars

sharp border-radius

faster animation-time

dark theme