Content Preloader Plugin

Introduction

This plugin allows you to show animated placeholder elements while the user waits 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.
💡
Tip: How to enable ID Attribute for an element in Bubble - https://forum.zeroqode.com/t/how-to-add-id-attribute-to-html-elements/469

How to Setup

  1. First of all, install the “Content Preloader” plugin in your app.
  1. Place the plugin element on the page, alongside the elements to which you wan appy the plugin's effects:
Image without caption

Plugin Element Proprieties

All properties (style, IDs, etc) can be found on the plugin's element:
Image without caption
Image without caption
Note: plugin parameters were moved from the Plugin tab to the plugin element on the 1.15.0 version.

Parameters

  1. Enabled - checkbox, if checked - enables the plugin's effects on the page.
  1. Duration - Number in seconds.Is responsible for the duration of the preloader effect. You can play with it for a better experience. The plugin will hide all the elements using the preloader class and make them visible after the specified dutaion as soon as the elements are loaded onu the page (sing Bubble.)
  1. Text Preloader Line Height - Number in pixel.This parameter will be applied to the text preloader. By default text is 14 px height, so if you need a bigger height, you can fill your own value.
  1. Number of Lines for Text Preloader - Number. 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.
  1. Rounded prel. width - Number in px. Indicate the width of the rounded preloader in pixels.
  1. Rounded prel. height - Number in px. Indicate the height of the rounded preloader in pixels.
  1. Rounded border-radius - Number in px.Indicate the border-radius for the rounded preloader in pixels.
  1. R-ed container b-r radius - Number in px. Set the border radius for the rounded preloader container in pixels
  1. Color 1 - Color in HEX. Set the color for the first option (optional).
  1. Color 2 - Color in HEX. Set color for the second part (optional).
  1. Color 3 - Color in HEX. Set the color for the last part of preloading (optional).
  1. Background Color - Color in HEX.Set the color for the background of the preloader container (optional).
  1. Image-preloader ID - text. Specify the ID to identify the image for the preloader. E.g.-"image-preloader".
  1. Button-preloader ID -text. Specify the ID to identify the button for the preloader. E.g. - "button-preloader".
  1. Element-preloader ID - text. Specify the ID to identify the element for the preloader. E.g. - "element-preloader".
  1. Heading-preloader ID - text. Specify the ID to identify the header-text for the preloader. E.g. - "heading-preloader"g.
  1. Text-preloader ID - text. Specify the ID to identify the text for the preloader. E.g. - "text-preloader".
  1. Rounded-preloader ID - text. Specify the ID to identify the rounded element for the rounded preloader. E.g - "rounded-image".
  1. Video-preloader ID - text. Specify the ID to identify the video element for the preloader. E.g. - "video-preloader".
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 navigate to the app Settings -> General tab, and tick the checkbox next to "Expose the option to add an ID attribute to HTML elements".
Image without caption
Preloader ID can be: image-preloader, rounded-image-preloader, heading-preloader, text-preloader, button-preloader. If you want to apply the preloader effect for a shape, or a group, you can also use the “image-preloader” ID, for example like this:
Image without caption

Element Actions

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

Changelogs

Update 03.05.21 - Version 1.13.0
  • Fixed video-preloader issue. Added possibility to set the id's dynamic.
Update 16.11.21 - Version 1.15.0
  • The settings were moved to the plugin element, style settings were added, the measurement system was changed to px.
Update 1.12.21 - Version 1.16.0
  • Added content preloader for input elements.
Image without caption
Update 13.12.21 - Version 1.17.0
  • Fixed the issue with the "Stop Preloader action"
Update 29.03.23 - Version 1.26.0
  • Fixed the "Start Preloader" action
Update 2.08.23 - Version 1.29.0
  • minor fixes (logs)

Demo to preview the settings