Placeholder
Basic
Placeholders can be used to enhance the experience of your application. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, color, and sizing can be easily customized with our utility classes.
Color
By default, the placeholder
uses currentColor
. This can be overridden with a custom color or utility class.
Width
You can change the width
through grid column classes, width utilities, or inline styles.
Sizing
The size of .placeholder
s are based on the typographic style of the parent element. Customize them with sizing modifiers: .placeholder-{xs|sm|lg}
.
Animation
Animate placeholders with .placeholder-glow
or .placeholder-wave
to better convey the perception of something being actively loaded.