🧩 Step 1: Enable the ID Attribute Option Open your Bubble app editor.

Go to the Settings tab → click on General.

Scroll down and check the box:
✅ “Expose the option to add an ID attribute to HTML elements.”

This allows you to assign custom IDs to elements, which the plugin uses to target them.

🔧 Step 2: Set the Target Element IDs
Select the elements (images, text, buttons, etc.) you want to apply the shimmer effect to.
In each element’s property panel, assign an ID Attribute (e.g., profile-img, loading-text, etc.).

-In the plugin element’s properties, enter a matching keyword from that ID into the appropriate field:
-For example, if the ID is profile-img, enter profile in the imageID field.
-You can use multiple matching fields such as text skeleton ID, heading skeleton ID, input skeleton ID, button skeleton ID, element skeleton ID, video skeleton ID, and rounded skeleton ID.
-The plugin will automatically apply the shimmer effect to all elements that contain those matching substrings.

🎨 Step 3: Customize the Shimmer Loader
Turn the preloader on or off using the Toggle checkbox.
-Use the duration field to control how long the preloader should stay visible (in seconds).

For text elements:
-Use Pre Font line Height to set the height of each shimmer line.
-Use Number of lines to define how many lines appear.
-For rounded or card-style elements:
-Set Pre rounded width and Pre rounded height to control loader size.
-Adjust Border Radius for internal rounding and Container Border Radius for the outer box.
-Choose color_1, color_2, and color_3 to define the shimmer gradient.
-Set the overlay background . Use #ffffff00 for full transparency.

⚙️ Step 4: Control the Preloader via Workflows
You can also control the skeleton shimmer dynamically using Bubble workflows:

Go to the Workflow tab in Bubble.
-Add a new action under "Plugins".
Select either:

-Start Preloader → to manually trigger the shimmer loader.
-Stop Preloader → to manually remove it from the page.

This is useful for advanced use cases, like showing the loader before an API call and hiding it once the data is received.