Skip to content
Notifications
Mia Okafor sent a new order
15 min agoEthan Ashford joined the team
just nowMason Fischer sent a new order
5 days ago
View all

Placeholders

Placeholders are skeleton blocks shown while real content loads, so the layout does not jump. Combine widths, sizes, colours and glow or wave animations to sketch cards, lists, tables, profiles, dashboards and media before the data arrives.

1Basic placeholders

<code>.placeholder</code> with grid column classes sets the width of each loading bar.

2Sizes

<code>.placeholder-lg</code>, <code>-sm</code> and <code>-xs</code> change the bar height.

3Colors

Background utilities colour the placeholders; the default uses the current text colour.

4Glow animation

Wrap the placeholders in <code>.placeholder-glow</code> to make them pulse softly.

5Wave animation

<code>.placeholder-wave</code> moves a light wave across the bars.

6Loading card

A card skeleton: image block, title, text lines and a disabled button placeholder.

7Loaded vs loading

The real card next to its placeholder version so you can match sizes exactly.

Garden salad

Garden salad

We keep things simple, so you can focus on what matters to you.

View

8List with avatars

Round avatar placeholders and two lines per row for contact or message lists.

9Table rows

Keep the real table header and fill the rows with placeholders while data loads.

CustomerDateAmount

10Profile header

Cover, avatar and name placeholders for a profile page.

11Article

Headline, meta line and paragraphs of varying width for a blog post.

12Button placeholders

Disabled buttons with <code>.placeholder</code> keep their colour and size while loading.

13Form skeleton

Label lines and input-sized blocks while a form is fetched.

14Comment thread

Nested comment skeletons with indented replies.

15Product grid

Square image placeholders with title and price lines in a responsive grid.

16Stat tiles

Dashboard KPI cards waiting for their numbers.

17Chat bubbles

Alternating left and right message bubbles.

18Navbar skeleton

A header outline while the menu loads - brand, links and an avatar circle.

19Media block

A 16:9 placeholder for a video or hero image with a caption below.

20Chart skeleton

Bars of different heights hint at a chart that is still loading.