Advanced Skeleton Content Preloader

✅

Link to the plugin page:

https://zeroqode.com/plugin/advanced-skeleton-content-preloader-plugin-for-bubble-1709617697094x346869307063637700

Demo to preview the plugin:

✅

Live Demo:

https://squeletontesting.bubbleapps.io/?utm_source=docs&utm_medium=referral&utm_campaign=demo_link

✅

Bubble Editor:

https://bubble.io/page?version=live&id=squeletontesting&name=index&tab=Design&type=page

Introduction

The Advanced Skeleton Content Preloader plugin allows you to display elegant skeleton loading screens while your Bubble app fetches data or loads dynamic content. It enhances perceived performance by showing animated placeholders instead of empty states.

With workflow-controlled start/stop actions, full styling options, and support for ID-targeted elements, this plugin gives you fine-grained control over loading states.

Key Features

Prerequisites

Before using the plugin:

Enable ID Attributes in Bubble

Go to:

Settings → General → Advanced → “Expose the option to add an ID attribute to HTML elements”

Basic understanding of assigning ID attributes to elements.

No additional libraries or configuration required.

Title	Description	Type
Element ID	The ID (or comma-separated list of IDs) of the Bubble elements that the skeleton loader should be applied to.	Text
Loading Time	Total duration (in milliseconds) that the skeleton loader remains visible before automatically stopping.	Number
Start By Workflow	If enabled, the skeleton loader will only start when triggered by a workflow action.	Yes/No
Stop By Workflow	If enabled, the skeleton loader will only stop when triggered by a workflow action.	Yes/No
Background Color 1	The primary background color of the preloader animation.	Color
Background Color 2	The secondary highlight color used for the animation sheen effect.	Color
Default Border Radius	Border radius (in px) applied to skeleton shapes unless the underlying element already defines its own radius.	Number
Animation Speed	Speed of the animation cycle in milliseconds. A lower value results in faster animation.	Number
Animation Angle	The direction (in degrees) of the animated gradient sweep (e.g., 0° = horizontal, 90° = vertical).	Number
Animation Type	The easing function that defines movement behavior of the animation (linear, ease, ease-in, ease-out, ease-in-out).	Dropdown

Title	Description	Type
Value	Optional duration override (in milliseconds) for this specific start action. If left blank, the default Loading Time is used.	Number (optional)

Title	Description
Has Finished Loading	Fires when the loading animation completes naturally (after the defined Loading Time) or when manually stopped via workflow. Useful for triggering UI transitions or enabling user interaction.

Advanced Skeleton Content Preloader

Demo to preview the plugin:

Introduction

Prerequisites

How to Set Up

Step 1. Install the Plugin

Step 2. Add the Preloader Element

Step 3. Assign ID Attributes

Step 4. Link IDs to the Plugin

Step 5. Control via Workflows

Start Skeleton Preloader

Stop Skeleton Preloader

Plugin Element - Skeleton Preloader

Fields

Element Actions

Element Events

Changelogs

Update 26.09.25 - Version 1.9.0

Update 26.09.25 - Version 1.8.0

Update 11.09.25 - Version 1.7.0

Update 11.06.25 - Version 1.6.0

Update 17.05.25 - Version 1.5.0

Update 09.04.24 - Version 1.4.0

Update 07.03.24 - Version 1.3.0

Update 05.03.24 - Version 1.2.0

Update 05.03.24 - Version 1.1.0

Update 08.12.23 - Version 1.0.2

Update 23.11.23 - Version 1.0.1

Update 05.09.23 - Version 1.0.0

Update 05.09.23 - Version 0.0.1