How To Use
Add the Skeleton Loader element to your page.

Choose a Skeleton Type, such as Card, Card Grid, Table, List, Profile Header, Dashboard Stats, Form, Chat Messages, Media Card, Search Results, Sidebar Menu, Notification List, Kanban Cards, Calendar Rows, Pricing Cards, or Custom Rows.

Choose a Placement Mode:

Inline displays the skeleton inside the plugin element.

Overlay Target IDs displays skeleton overlays on top of existing Bubble elements by ID attribute.

For inline loading, place the Skeleton Loader where the loading placeholder should appear.

For overlay loading, enable ID attributes in your Bubble app settings, give your target elements an ID, and enter those IDs in Target Element IDs. Multiple IDs can be separated with commas.

Page Load Behavior

Visible On Page Load controls whether the skeleton appears automatically when the page opens.

Auto Hide On Page Load hides the skeleton after the browser page has loaded.

Auto Hide Delay controls how long the plugin waits before hiding after page load.

Fade Duration controls how smoothly the skeleton fades in and out.

Collapse When Hidden works with the Should Collapse exposed state so Bubble can remove the element’s empty space after the fade finishes.

To collapse inline skeleton space after hiding:

Add a Bubble condition to the Skeleton Loader element.

When this Skeleton Loader’s Should Collapse is yes, set This element is visible to no.

In the Layout tab, enable Collapse height when hidden.

Workflow Actions

Show Skeleton displays the skeleton manually from a Bubble workflow.

Hide Skeleton hides the skeleton manually from a Bubble workflow.

Toggle Skeleton shows the skeleton if hidden, or hides it if visible.

Refresh Skeleton re-renders the skeleton layout and recalculates overlay positions.

For API calls, searches, repeating groups, and custom data loading, the recommended workflow is:

Show Skeleton before the loading process starts.

Run your API call, search, database change, or repeating group update.

Hide Skeleton when the data is ready.

Styling Options

Animation Style controls the animation type. Options include Shimmer, Pulse, Wave, and None.

Animation Speed controls how fast the loading animation moves. Use 1 for normal speed, higher values for faster animation, and lower values for slower animation.

Base Color controls the main skeleton block color.

Highlight Color controls the shimmer or highlight color.

Background Color controls the skeleton container background.

Border Radius controls how rounded the skeleton pieces are.

Rounded Style gives quick shape presets such as Soft, Rounded, Pill, and Sharp.

Gap controls spacing between skeleton items.

Padding controls spacing inside the skeleton container.

Item Height controls the height of custom rows.

Density adjusts spacing and sizing with Comfortable, Compact, or Spacious presets.

Show Avatar, Show Image, Show Header, and Show Button control optional placeholder parts.

Custom Class lets advanced users add a CSS class name to the skeleton.

Custom CSS lets users inject CSS directly into that skeleton instance. Use %%ROOT%% to target only the current skeleton instance.

Example Custom CSS:

%%ROOT%% .sk-wrap {
 background: rgba(15, 23, 42, 0.92) !important;
 border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

%%ROOT%% .sk-block,
%%ROOT%% .sk-line,
%%ROOT%% .sk-avatar,
%%ROOT%% .sk-button {
 background: rgba(51, 65, 85, 0.95) !important;
}
Overlay Target Options

Target Element IDs is a comma-separated list of Bubble element ID attributes to cover with skeleton overlays.

Overlay Z Index controls how high the overlay appears above the page.

Overlay Offset expands the overlay beyond the target element by a set number of pixels.

Hide Target While Loading hides the original target while the skeleton is visible.

Block Pointer Events prevents users from clicking the covered area while loading.

Match Target Radius copies the target element’s border radius for a cleaner overlay fit.

Observe Changes watches page layout changes and refreshes overlays automatically. Keep this off unless the target layout changes while loading, because it can cause extra re-rendering.

Exposed States

Is Active returns yes when the skeleton is currently visible.

Should Collapse returns yes after the skeleton has finished hiding and can safely be collapsed with a Bubble visibility condition.

Active Overlay Count returns how many target overlays are currently active.

Target IDs Found returns the target IDs that were found on the page.

Target IDs Missing returns the target IDs that could not be found.

Placement Mode Used returns whether the skeleton is currently using Inline or Overlay Target IDs mode.

Events

Skeleton Rendered triggers when the skeleton layout is rendered.

Overlay Targets Updated triggers when overlay targets are found and positioned.

Overlay Target Missing triggers when one or more Target Element IDs cannot be found.

Best Practices

Use Inline mode when the skeleton should take up space in the page layout.

Use Overlay Target IDs when you want to cover existing elements while they load.

Use workflow actions for repeating groups, searches, API calls, AI requests, payments, and dashboard loading because Bubble workflows know exactly when data is ready.

Use Auto Hide On Page Load only for first page load polish. For dynamic data loading, use Show Skeleton and Hide Skeleton actions.

Keep Observe Changes off unless you specifically need the skeleton overlay to track layout changes.

Use Custom CSS with %%ROOT%% when you want advanced styling without affecting other skeleton loaders on the page.