A pulsating box that can be used as a loading state for text, following the principal of showing content to the user as early as possible, and progressively rendering content as it loads.
width?: string = "100px"
The width of the shimmer defaults to being 100px, but can be overridden with the
All CSS units should work correctly.
size?: FontSizeStep = 'mouse'
An optional font-size can be passed using
size, this allows you to match the height of the shimmer effect
to the loaded text, to prevent it from "jumping" when the shimmer is swapped out.
backgroundColor?: string = theme.colours.greyScale.lightGrey
background-color to use, instead of the default of
lightGrey from the theme. Generally
this should be from the theme color palette.
borderRadius?: keyof Theme["radii"]
border-radius can be provided, as a one of the radii provided by the Theme type.
delay?: 0 | 75 | 150 | 225 | 300 = 0
If there are multiple shimmers on the same page, it looks nicer if they are staggered in their animations. You can do this by setting the delay property, for example:
They can be stacked safely to represent multi-line text.
For it to not cause "jumping", it needs to know the correct line height.
By default this
"1.5" which makes
<Text>, but for a
<Heading> you would pass
size valid in a CSS calc statement can be passed, eg: