Skeleton Shimmer Load creates professional loading states with animated skeleton screens for Bubble applications. Apply shimmer and pulse animations to any element using Element ID targeting. Features customizable colors, variable animation speeds, synchronized animations across multiple elements, size-aware duration calculations, and programmable start/stop actions. Perfect for improving perceived performance during data loading, API calls, page transitions, and image loading. Provides visual feedback that reduces user anxiety and prevents jarring blank screens. Includes exposed is_loading state for conditional workflows, automatic style restoration, and support for dynamically added elements. Choose between independent or synchronized animations, enable size-aware mode for consistent visual speed across different element sizes, and use staggered delays for waterfall loading effects.

Skeleton Shimmer Load

Skeleton Shimmer Load

Skeleton Shimmer Load

Elegant skeleton placeholders and a subtle shimmer animation to any element in your Bubble app

About Plugin

About Plugin

About Plugin

Documentation

Documentation

Documentation

Install

Install

Install

Skeleton Shimmer Load applies CSS-based shimmer and pulse animations to any page element by targeting it via Element ID. When activated, the plugin dynamically applies skeleton classes that create a sweeping gradient animation across the element with a subtle opacity pulse effect. The shimmer uses CSS linear gradients animated with translateX transforms for smooth hardware-accelerated performance. Users can control animations through checkbox properties, element actions in workflows, or exposed states for conditional logic.

The plugin automatically preserves original element styles and restores them when the skeleton is removed. Supports three animation modes - default independent animation per element, synchronized global animation across all skeletons, and size-aware mode that calculates duration based on element dimensions for consistent visual speed perception.

Preview

Preview

Go to Editor

Go to Editor

Go to Editor

Go to Preview

Go to Preview

Go to Preview

When to Use

Everything you need in a single plugin

hourglass_empty

Data Loading States

expand_more

Show skeleton while repeating groups or database queries load data. Provides immediate visual feedback that content is coming, improving perceived performance and reducing user anxiety during wait times. Automatically show/hide based on data source loading status.

Benefits

Benefits

sentiment_satisfied

Better User Experience

Skeleton screens improve perceived performance by 20-30 percent compared to spinners or blank states. Users know content is loading and see approximate layout structure, reducing anxiety and bounce rates during wait times.

view_compact

Layout Stability

Prevents content jumps and layout shifts during loading by maintaining element dimensions and positions. Skeleton placeholders hold space for actual content, creating smooth transitions when real data appears.

workspace_premium

Professional Appearance

Modern loading pattern used by Facebook, LinkedIn, and YouTube. Shimmer animations create polished, professional feel that elevates app quality perception and user trust in the application.

palette

Customizable Animations

Full control over colors, speed, and animation style to match your app design. Choose base and highlight colors, adjust duration from fast to slow, enable synchronization, and configure size-aware mode for perfect visual consistency.

gps_fixed

Flexible Targeting

Target any element by ID or class selector. Apply skeleton to groups, containers, images, repeating groups, or custom elements. Support for multiple elements with same ID or class enables batch skeleton application.

settings_remote

Multiple Control Methods

Control skeletons via checkbox property for automatic behavior, element actions in workflows for programmatic control, or exposed is_loading state for conditional logic. Choose the method that fits your workflow best.

auto_fix_high

Auto Cleanup

Automatically stores and restores original element styles when skeleton stops. No manual cleanup needed - background color, position, overflow, display, and visibility properties return to original values automatically.

speed

Performance Efficient

Pure CSS animations with minimal JavaScript overhead. Hardware-accelerated transforms ensure smooth 60fps animations on all devices. No external libraries or dependencies - completely self-contained plugin with optimal performance.

sentiment_satisfied

Better User Experience

Skeleton screens improve perceived performance by 20-30 percent compared to spinners or blank states. Users know content is loading and see approximate layout structure, reducing anxiety and bounce rates during wait times.

view_compact

Layout Stability

Prevents content jumps and layout shifts during loading by maintaining element dimensions and positions. Skeleton placeholders hold space for actual content, creating smooth transitions when real data appears.

workspace_premium

Professional Appearance

Modern loading pattern used by Facebook, LinkedIn, and YouTube. Shimmer animations create polished, professional feel that elevates app quality perception and user trust in the application.

palette

Customizable Animations

Full control over colors, speed, and animation style to match your app design. Choose base and highlight colors, adjust duration from fast to slow, enable synchronization, and configure size-aware mode for perfect visual consistency.

gps_fixed

Flexible Targeting

Target any element by ID or class selector. Apply skeleton to groups, containers, images, repeating groups, or custom elements. Support for multiple elements with same ID or class enables batch skeleton application.

settings_remote

Multiple Control Methods

Control skeletons via checkbox property for automatic behavior, element actions in workflows for programmatic control, or exposed is_loading state for conditional logic. Choose the method that fits your workflow best.

auto_fix_high

Auto Cleanup

Automatically stores and restores original element styles when skeleton stops. No manual cleanup needed - background color, position, overflow, display, and visibility properties return to original values automatically.

speed

Performance Efficient

Pure CSS animations with minimal JavaScript overhead. Hardware-accelerated transforms ensure smooth 60fps animations on all devices. No external libraries or dependencies - completely self-contained plugin with optimal performance.

sentiment_satisfied

Better User Experience

Skeleton screens improve perceived performance by 20-30 percent compared to spinners or blank states. Users know content is loading and see approximate layout structure, reducing anxiety and bounce rates during wait times.

view_compact

Layout Stability

Prevents content jumps and layout shifts during loading by maintaining element dimensions and positions. Skeleton placeholders hold space for actual content, creating smooth transitions when real data appears.

workspace_premium

Professional Appearance

Modern loading pattern used by Facebook, LinkedIn, and YouTube. Shimmer animations create polished, professional feel that elevates app quality perception and user trust in the application.

palette

Customizable Animations

Full control over colors, speed, and animation style to match your app design. Choose base and highlight colors, adjust duration from fast to slow, enable synchronization, and configure size-aware mode for perfect visual consistency.

gps_fixed

Flexible Targeting

Target any element by ID or class selector. Apply skeleton to groups, containers, images, repeating groups, or custom elements. Support for multiple elements with same ID or class enables batch skeleton application.

settings_remote

Multiple Control Methods

Control skeletons via checkbox property for automatic behavior, element actions in workflows for programmatic control, or exposed is_loading state for conditional logic. Choose the method that fits your workflow best.

auto_fix_high

Auto Cleanup

Automatically stores and restores original element styles when skeleton stops. No manual cleanup needed - background color, position, overflow, display, and visibility properties return to original values automatically.

speed

Performance Efficient

Pure CSS animations with minimal JavaScript overhead. Hardware-accelerated transforms ensure smooth 60fps animations on all devices. No external libraries or dependencies - completely self-contained plugin with optimal performance.

Key Features

Key Features

Everything you need in a single plugin

auto_awesome

Shimmer Animation

expand_more

Smooth gradient animation that sweeps across skeleton elements using CSS linear gradients. Creates professional sweeping highlight effect that moves from left to right, providing engaging visual feedback during loading states.

graphic_eq

Pulse Effect

expand_more

Subtle opacity animation adds depth to skeleton placeholders. Oscillates between full and reduced opacity with smooth cubic-bezier easing, creating calm breathing effect that enhances shimmer animation.

filter_center_focus

Element ID Targeting

expand_more

Target any page element by ID or class selector for skeleton application. Supports automatic hash prefix addition, attribute-based ID matching, and class selectors for multiple elements. Works with dynamically added elements automatically.

color_lens

Customizable Colors

expand_more

Set base skeleton color and highlight shimmer color independently using color pickers. Choose colors that match your app theme, from light grays for light mode to dark grays for dark mode, with full RGB/HSL support.

timer

Variable Duration

expand_more

Adjust animation speed from 0.5 to 3 seconds to match operation timing. Fast energetic animations for quick loads, standard professional speed for most cases, or slow relaxed animations for longer operations.

sync

Sync Animation

expand_more

Synchronize shimmer across all skeleton elements for coordinated loading experience. All elements shimmer in perfect sync using global CSS variables, creating unified professional appearance across page components.

straighten

Size Aware Mode

expand_more

Automatically adjusts animation duration based on element dimensions. Larger elements get longer duration, smaller elements get shorter duration, maintaining consistent visual speed perception across varying sizes. Calculates area and applies proportional timing.

schedule

Start Delay

expand_more

Add delay before animation begins for staggered loading effects. Create waterfall patterns with multiple skeleton elements appearing in sequence at different times. Perfect for card grids and list items.

play_circle

Element Actions

expand_more

Programmatic Start Skeleton and Stop Skeleton actions in workflows. Trigger animations before API calls, stop on completion, handle errors, and control loading states with precise workflow timing and conditional logic.

visibility

Exposed State

expand_more

Access is_loading boolean state for conditional workflows and visibility. Show/hide content based on loading status, disable buttons during operations, display loading text, and create reactive UI that responds to skeleton state changes.

Documentation

Documentation

Documentation

FAQ

FAQ

Common questions

helpHow do I set element IDs for skeleton targeting?
helpCan I apply skeleton to multiple elements at once?
helpWhat happens to my element when skeleton starts?
helpShould I use Sync Animation or independent animations?
helpWhen should I enable Size Aware mode?
helpHow do I stop skeleton animation?
helpDoes skeleton work with repeating groups?
helpCan I customize animation colors for dark mode?
helpWhat is the best animation duration?
helpDoes skeleton affect page performance?

Contato

Visioned and Crafted by Nebulapps

© All right reserved

Visioned and Crafted by Nebulapps

© All right reserved