Placeholder component
Use loading placeholders for your components or pages to indicate something may still be loading. They’re built only with HTML and CSS, no JS is needed to create them
Placeholder animation
Animate placeholders with .placeholder-glow or .placeholder-wave added to parent container to better convey the perception of something being actively loaded
Placeholder width
You can change the width through grid column classes: .col-[1-12], width utilities: .w-[25|50|75|100], or inline styles: style="width: [number]%". The base .placeholder class is required
Placeholder height
The size of .placeholder is based on the typographic style of the parent element. Customize them with sizing modifiers: .placeholder-lg, .placeholder-sm, or .placeholder-xs.
Centered placeholder
Placeholder by default is an inline element and you can control its alignment simply by using .text-start, .text-center and .text-end classes on parent container
Right aligned placeholder
Example of right alignmed placeholder. Can be combined with other placeholders in the same container or used separately depending on original content alignment
Placeholder color
By default, the placeholder uses currentColor and inherits color from parent element. This can be overridden with a custom color or utility class, including a set of available custom colors
Animated color options
All placeholder colors support animation by default, no additional CSS or classes are required since both effects are based on repeating opacity or image-mask animation
Card placeholder
In the example below, we take a typical card component and recreate it with placeholders applied to create a “loading card”. Size and proportions are the same between the two. We apply additional styling to .btn via ::before to ensure the height is respected. You may extend this pattern for other situations as needed, or add a within the element to reflect the height when actual text is rendered in its place.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereTable placeholder
Example of placeholder in table element. You can show placeholder only in table head, table body or in both. Keeping header text visible would work better when number of columns is known and you need only to load table content (e.g. when pagination is triggered). If headers are hidden, make sure column widths are defined in table markup or CSS, as they may collapse and jump when content is loaded.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @Kopyov |
| 2 | Victoria | Baker | @Vicky |
| 3 | James | Alexander | @Alex |
| 4 | Franklin | Morrison | @Frank |
Navbar placeholder
Although navbar supports placeholder, implementation is a bit different: all collapsible containers and dropdown menus are disabled, but all their togglers are visible. To disable links, add .pe-none to disable pointer events and control container widths with .col-* classes, in some cases you might also need to toggle these classes in parent containers as well. Check the example below.
Sidebar placeholder
Placeholder implementation in the sidebar is custom and depends on the content type you display there. All sub levels and item states in sidebar navigation are disabled by default, unless you need to show them intentionally (e.g. when you load sub menus dynamically). Apart from that, all other elements are rendered in a regular way with .placeholder elements.
Media object placeholder
You can replace any text or image content with placeholder, keeping the structure of content section. In this example we have a regular list group with custom inner content structure based on utility classes, where we replace our images with a custom inline SVG placeholder that has similar size and shape. All parent links are disabled with .pe-none class.
Page header placeholder
Replacing content in page header might be useful when you need to show layout structure on page load. Here we replace right content group (dropdown and a list of images) with a multi line placeholder, this requires some additional changes in the markup - we don't replace inner content of right nav, but the whole container with a few parent levels. This can be changed if you really need to be that precise.
Modal placeholder
Showing placeholders in modals is easy, it has the same logic as in other elements with a few exceptions: we can replace single or multiple buttons with animated placeholders, close button is also visible and disabled. We recommend to keep modal markup always available during loading process and replace only inner content, this will prevent full component layout shift when progress is finished.
Dropdown placeholder
Dropdown menu also supports placeholder. You can either show it in each dropdown item, simulate a short vertical list with multiple placeholders that are displayed on multiple lines within 1 container, or you can completely replace all content inside .dropdown-menu container with your custom placeholder implementation.
