Content Preloader Plugin

Link to plugin page:


This plugin allows you to show animated placeholder elements while the user awaits for the content to be fully loaded. This significantly improves the user experience and gives the feeling of loading progress. Most of the top apps and websites employ this technique, for example Facebook, Asana, Slack and many others.

How to enable ID Attribute for an element in Bubble -

How to Setup

All the fields annotated with (headers) are required.

  1. First of all install the “Content Preloader” plugin. This plugin provides pure CSS and JS headers for your application.

  2. The plugin provides to workflow actions for enabling and disabling "Content Preloader" plugin on page. Start Preloader - starts the action for preloader to work on a page. Stop Preloader - stops the action for preloader to work on a page.

3. After plugin is installed, don’t forget to fill out plugin fields in the Plugins Tab.

a) Duration (s) - it will be the duration for preloading effect. You can play with it for the best experience. The plugin will hide all the elements with preloader class, and make it visible after indicated duration once the elements are loaded by Bubble. b) Text Preloader Line Height - this parameter will be applied for the text preloader. By default text is 14 px height, so if you need a bigger height, you can fill your own. c) Number of Lines for Text Preloader - you can specify how many lines of text preloader to show on the top of your text. A large number of lines may affect the performance of your application. An optimal choice would be in the range from 1 to 30. d) Color 1 - set the color for fist option (optional) e) Color 2 - set color for the second part (optional) f) Color 3 - set the color for last part of preloading (optional)

Color values should be provided in HEX values (ex: 11aabb, c1c1c1 etc)

4. To apply the preloader effect, just specify preloader id in the ID Attribute field of required elements (such as images, buttons etc.) To expose the ID attribute field you need to go to the settings of your Bubble app, switch to "General" tab and then check the "Expose the option to add an ID attribute to HTML elements" checkbox. Preloader id can be: image-preloader, rounded-image-preloader, heading-preloader, text-preloader, button-preloader. If you want to apply preloader effect for shape, or a group, you can also use “image-preloader” id, for example like this

Plugin Element Proprieties

The plugin contains Preloader visual element which should be used on page.

Element Actions

Start Preloader a Preloader - used to start the preloader in workflow Stop Preloader a Preloader - used for stopping the preloader animation workflow


Update 03.05.21 - Version 1.13.0

  • Fixed video-preloader issue. Added possibility to set the id's dynamic.

Demo to preview the settings