Upgrade to Pro
Get access to all features
- Advanced Analytics
- Team Collaboration
- API Access
Placeholders
Placeholders provide visual feedback during content loading states, enhancing user experience by reducing perceived loading times. These customizable components simulate the layout and structure of content before it's fully loaded, maintaining visual consistency and preventing layout shifts.
Card Example
This example demonstrates a common use case for placeholders within a card component. The
placeholder-glow animation creates a subtle loading effect, while placeholder
elements maintain the expected content structure. The aria-hidden="true" attribute
ensures proper accessibility by hiding these elements from screen readers.
Loading State
Create realistic loading states by combining multiple placeholder elements to mimic your content's structure. This pattern helps maintain visual hierarchy and provides users with a clear indication of the upcoming content layout.
Basic Usage
Placeholders can be applied to any element using the placeholder class. Combine
with Bootstrap's grid classes (col-*) to control width and create realistic content
representations during loading states.
Width Options
Control placeholder widths using Bootstrap's grid classes (col-*), utility classes
(w-*), or custom CSS. This flexibility allows you to create accurate
representations of your content's layout.
Color Variations
Customize placeholder colors using Bootstrap's background utility classes (bg-*).
This allows you to maintain your application's color scheme or create visual hierarchies in
loading states.
Size Options
Adjust placeholder sizes using the placeholder-lg, placeholder-sm, or
placeholder-xs classes. These modifiers help match your placeholder sizes with your
application's typography scale.
Animation Effects
Add movement to your placeholders with placeholder-glow for a subtle pulsing effect
or placeholder-wave for a smooth wave animation. These animations provide visual
feedback without being distracting.