SkeletonInline

An inline skeleton component which respects text properties such as line height and font size (which effectively becomes the height).

This type of skeleton component is most useful any time you need to mimic an inline piece of content. For example, this is common in the Breadcrumbs or List components.

Related components: SkeletonBlock and SkeletonText.

Code
Design

JavaScript import


import SkeletonInline from 'progressive-web-sdk/dist/components/skeleton-inline'

SCSS import


@import 'node_modules/progressive-web-sdk/dist/components/skeleton-inline/base';

Props table

Name & Description	Type	Default
className Adds values to the `class` attribute of the root element.	string	none
size Specifies the font-size (effectively the height) of the skeleton, in any valid dimension type.	string	'inherit'
style Specifies any inline styles to be applied to the element.	object	none
type Specifies the element type to be constructed.	string	'span'
width Specifies the width of the skeleton's children's width, in any valid dimension type.	string	'100%'

Basic example


<SkeletonInline />
<SkeletonInline />

With 25% width and size of 12px


<SkeletonInline width="25%" size="12px" />
<SkeletonInline width="25%" size="12px" />

With 50% width and size of 20px


<SkeletonInline width="50%" size="20px" />
<SkeletonInline width="50%" size="20px" />

With paragraph element


<SkeletonInline type="p" width="50%" size="20px" />
<SkeletonInline type="p" width="50%" size="20px" />

Screenshot

Potential uses

Used alongside SkeletonText to mimic the visual hierarchy and structure of the loaded page.
Animation is commonly used to communicate to the user that something is in progress.
Use in place of inline loaders, progress bars, full screen spinners, or logos which indicate page load.
Example use cases: Facebook for iOS and Android, Slack app, Open Table app.

Best practices

The key to a good skeleton state is to make it look similar enough to the loaded page that the user doesn’t notice any change between the two states. Choose a skeleton layout that depicts less UI than the final page.
As you design the skeleton, consider the size of the eventual content. Skeleton states should reflect the most likely layout.
To ensure the skeleton feels like a quick transition between states, don’t replace too many elements with a skeleton state. Only show elements that communicate the key functions of the page.
Use monotone when designing skeleton states. Too much color or contrast will attract too much attention.
Images can also be blurred or lazy loaded. For example, medium.com uses these techniques in addition to skeletons.