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.

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.

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.

• 8

• 2
• 
  Victoria

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.

Component

Victoria Williams

Marketing director

• Main
• Active link
• Top level link
• With children
  • Second level link
  • Second level link
• Multiple levels
  • Second level
  • Second level with child
    • Third level
    • Third level
  • Second level
• Disabled levels
  • Second level link
  • Second level link

Loading state

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.

Component

Walking away fallaciously

Wise that some and before yellow thus yikes mandrill

Recklessly won

Awkwardly thus when much according forwardly far grizzly

Fired or unlocked

Much contemptible squid crud the dear less hazy naturally

Loading state

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.

Component

Components - Placeholder

Customer

Royal Dutch Airlines

+14

Home Components Placeholder

Support

Settings

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 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.