# Skeleton Shimmer (Loading Animation)

**URL:** <https://forum.bubble.io/t/skeleton-shimmer-loading-animation/376386>\
**Category:** Plugin builders\
**Created:** [July 20, 2025, 5:56pm UTC](https://forum.bubble.io/t/skeleton-shimmer-loading-animation/376386 "2025-07-20T17:56:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![lucasmfariaslima](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/lucasmfariaslima/32/251494_2.png) [@lucasmfariaslima](https://forum.bubble.io/u/lucasmfariaslima)\
**Post date:** [July 20, 2025, 5:56pm UTC](https://forum.bubble.io/t/skeleton-shimmer-loading-animation/376386/1 "2025-07-20T17:56:52Z")

</div>

## [Plugin] Nebula - Skeleton Shimmer Loading 🔄✨

Hey Bubblers! 👋

Introducing a new free plugin:  
**Nebula - Skeleton Shimmer Loading**  
 ![DEMO](https://us1.discourse-cdn.com/bubble/original/3X/e/1/e1f9f3cdd214c46211d9080d3a203ba24dd2abb0.gif)

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.

* * *

### 🔧 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](https://us1.discourse-cdn.com/bubble/original/3X/a/c/aca98c512d663eae1c9923e9311a53c0e7c21d6b.png)

* * *

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

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

* * *

### 💡 Perfect for:

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

* * *

📦 Free on the Bubble Marketplace

🔗 [Click here to get the plugin](https://bubble.io/plugin/nebula---skeleton-shimmer-load-1752904255719x324446610629066750)

---

<div class="post-metadata">

**Author:** ![georgekariuki49](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/georgekariuki49/32/259503_2.png) [@georgekariuki49](https://forum.bubble.io/u/georgekariuki49)\
**Post date:** [April 11, 2026, 8:25am UTC](https://forum.bubble.io/t/skeleton-shimmer-loading-animation/376386/2 "2026-04-11T08:25:18Z")

</div>

Nice find here 🔥 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.

---

<div class="post-metadata">

**Author:** ![lucasmfariaslima](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/lucasmfariaslima/32/251494_2.png) [@lucasmfariaslima](https://forum.bubble.io/u/lucasmfariaslima)\
**Post date:** [April 11, 2026, 1:36pm UTC](https://forum.bubble.io/t/skeleton-shimmer-loading-animation/376386/3 "2026-04-11T13:36:47Z")

</div>

Thanks for the feedback, George!

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

Best regards