Skeleton Shimmer (Loading Animation)

Plugin builders
1

[Plugin] Nebula - Skeleton Shimmer Loading :counterclockwise_arrows_button::sparkles:

Hey Bubblers! :waving_hand:

Introducing a new free plugin:
Nebula - Skeleton Shimmer Loading
DEMO

This plugin adds a smooth shimmer-style skeleton loading effect to any element on your page, without needing to add extra elements. Just provide the element’s ID and the shimmer will be applied directly, respecting its original size and shape.

:wrench: How it works:

  1. Add the plugin to your page
  2. Set an ID Attribute on the group or element you want to animate (e.g., mygroup)
  3. Configure the plugin fields:
  • Element ID: mygroup
  • Base Color: Background color (e.g., #e0e0e0)
  • Highlight Color: Shimmer color (e.g., #f5f5f5)
  • Duration: Animation speed in seconds (e.g., 1.5)
  • Is Loading: Set to yes to activate, no to remove the effect
    image
    image341×799 24.9 KB

:framed_picture: Example use case:

Let’s say you have a group with the ID mygroup, and you want to show a shimmering placeholder while data is loading.

:white_check_mark: Just configure the plugin with that ID, and the shimmer will automatically animate over the element.

The plugin also observes late-loaded elements and applies the shimmer as soon as they’re added to the DOM.

:light_bulb: Perfect for:

  • Dynamic lists (Repeating Groups)
  • Components rendered after workflows
  • Dashboards, cards, placeholders, and more

:package: Free on the Bubble Marketplace

:link: Click here to get the plugin

2

Nice find here :fire: this should definitely be standard in every app.

That loading state makes a huge difference in perceived performance, especially for repeating groups and data-heavy pages.

3

Thanks for the feedback, George!

I hope the plugin helps you in developing your apps :slight_smile:
If you need any help, I’m available.

Best regards