Skeleton Shimmer Load
Elegant skeleton placeholders and a subtle shimmer animation to any element in your Bubble app
0
Rating
37
Installs
v1.1.1
Version
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.
When to Use
Everything you need in a single plugin
Data Loading States
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.
API Call Feedback
Display skeleton animations during external API calls to indicate processing. Users see immediate feedback that their action triggered a process, making apps feel more responsive even during network delays. Perfect for search, submit, and fetch operations.
Page Transitions
Use skeleton screens during navigation between pages or tab switches. Creates smooth transitions and maintains visual continuity, preventing jarring blank screens and reducing perceived load time during content changes.
Image Loading
Apply skeleton to image containers while images download from servers. Particularly useful for large images, galleries, or profile pictures where load times vary. Provides professional placeholder states that maintain layout stability.
Form Processing
Show skeleton on form fields or buttons during submission processing. Indicates the form is being processed and prevents duplicate submissions by providing clear visual feedback that an operation is in progress.
Benefits
Everything you need in a single plugin
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.
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.
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.
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.
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.
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 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.
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
Everything you need in a single plugin
Shimmer Animation
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.
Pulse Effect
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.
Element ID Targeting
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.
Customizable Colors
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.
Variable Duration
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 Animation
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.
Size Aware Mode
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.
Start Delay
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.
Element Actions
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.
Exposed State
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.
Common Questions
Everything you need to know before installing
How do I set element IDs for skeleton targeting?
Select your target element in the Bubble editor, find the ID Attribute field in the gray inspector panel on the left side, and enter a unique ID like profile-card or search-results. Then reference this exact ID in the Skeleton element's Element ID field. The plugin will automatically find and apply animations to elements with this ID.
Can I apply skeleton to multiple elements at once?
Yes, use a class selector by starting Element ID with a dot, like .skeleton-target. All elements with this class will receive skeleton animation simultaneously. Alternatively, multiple elements can have the same ID attribute, and the plugin will target all of them.
What happens to my element when skeleton starts?
The plugin stores your element's original styles (background color, position, overflow, display, visibility) in memory, then applies skeleton classes with gray background and shimmer animation. When skeleton stops, all original styles are automatically restored exactly as they were before.
Should I use Sync Animation or independent animations?
Use Sync Animation when you have multiple skeleton elements and want a coordinated, professional appearance with all shimmers moving together. Use independent animations for organic feel or when using Start Delay to create staggered waterfall effects across elements.
When should I enable Size Aware mode?
Enable Size Aware when your skeleton elements have varying dimensions, like cards of different sizes or responsive layouts. The plugin calculates each element's area and adjusts duration proportionally, so all elements appear to shimmer at the same visual speed regardless of their actual size.
How do I stop skeleton animation?
Three ways - uncheck the is Loading checkbox, use the Stop Skeleton action in a workflow after your data loads, or change the dynamic value that controls is Loading (like setting a custom state to false or waiting for an API response).
Does skeleton work with repeating groups?
Yes, give your repeating group container an ID Attribute, then target it with the Skeleton element. Set is Loading to the repeating group's data source is loading property for automatic skeleton display while data fetches.
Can I customize animation colors for dark mode?
Absolutely. For dark themes, use darker Base Colors like hash 374151 or hash 1f2937, and lighter Highlight Colors like hash 4b5563 or hash 6b7280. Maintain 1-2 shade difference between them for best shimmer visibility on dark backgrounds.
What is the best animation duration?
Use 1.5 seconds for most cases as it provides balanced, professional feel. Use 0.8-1.0 seconds for quick operations that feel energetic. Use 2.0-2.5 seconds for longer operations where users expect to wait. Avoid very fast (under 0.5s) or very slow (over 3s) animations.
Does skeleton affect page performance?
No, the plugin uses pure CSS animations with hardware-accelerated transforms for optimal 60fps performance. JavaScript is minimal and only used for applying/removing classes and calculating size-aware durations. No external dependencies or network requests impact load time.