Components

sk-loader • version 2.1.1

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

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 Description
--sk-loader-background The background color of the skeleton bars
--sk-loader-highlight The color of the moving highlight for the wave effect
--sk-loader-animation-time The time of the animation for the wave effect
--sk-loader-border-radius The border radius of the skeleton bars

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

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 Description
--sk-loader-background The background color of the skeleton bars
--sk-loader-highlight The color of the moving highlight for the wave effect
--sk-loader-animation-time The time of the animation for the wave effect
--sk-loader-border-radius The border radius of the skeleton bars