Template Setup Guides

Content Preloader Plugin

Link to plugin page:


  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.

All the fields annotated with (headers) are required.

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.

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

Demo to preview the settings