##### Amara Evans

amara@example.com

Pro

### Upgrade to Pro

Get access to all features

- Advanced Analytics
- Team Collaboration
- API Access

Upgrade Now
Upgrade to Pro
Log Out

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

Card with Placeholders
Loading...
Card with Placeholders
Loading...

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

Content Loading State
Loading...
Content Loading State
Loading...

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

Basic Placeholders
Loading...
Basic Placeholders
Loading...

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

Width Variations
Loading...
Width Variations
Loading...

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

Color Options
Loading...
Color Options
Loading...

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

Size Variations
Loading...
Size Variations
Loading...

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

Animation Styles
Loading...
Animation Styles
Loading...
`ESC`

###### Quick Links

###### Dashboard

Analytics Overview

###### Profile

View your profile

###### Settings

Manage preferences

###### Help Center

Get support

###### Recent Searches

Analytics Dashboard User Settings Email Templates