Blue Loading Spinners

Demo to preview the plugin:

Introduction

This Plugin enables you to add up to 12 beautiful loading animations to your bubble app, greatly enhancing the user experience.
You can trigger the loading animation within a workflow or just add the element to the page and make it visible with conditional statements. Currently the loading animations are all in the same color (#20A4F3).
Image without caption

How to setup

  1. Add Spinner to Your Page
      • Go to the Design tab in the Bubble editor.
      • Drag and drop the Spinner or Constant Spinner element onto your page.
        • Element → Spinner.
          Element → Spinner.
  1. Use Spinner in Workflows (for the "Spinner" element)
    1. To control the visibility of the Spinner element dynamically:
      • Open the Workflow tab.
      • Add an action at the point where the spinner should appear:
        • Select Element Actions → Show A Spinner.
          • Workflow action → Show A Spinner.
            Workflow action → Show A Spinner.
      • Add another action where the spinner should disappear:
        • Select Element Actions → Hide A Spinner.
          • Workflow action → Hide A Spinner.
            Workflow action → Hide A Spinner.

Plugin Element Properties

Spinner

Element properties → Spinner.
Element properties → Spinner.

Element Actions

Show

This action triggers a spinner to start loading.
Workflow action → Show.
Workflow action → Show.
Title
Description
Type
Spinner
Here you can choose the type of spinner you want to be dsiplayed. Available options: Default, Circle, Dual-Ring, Ellipsis, Facebook, Grid, Heart, Hourglass, Ring, Ripple, Roller, Spinner
Dropdown

Hide

This action stops a spinner and hides it.
Workflow action → Hide.
Workflow action → Hide.

Constant Spinner

Element properties → Constant Spinner.
Element properties → Constant Spinner.
Fields:
Title
Description
Type
Spinner
Here you can choose the type of spinner you want to be dsiplayed. Available options: Default, Circle, Dual-Ring, Ellipsis, Facebook, Grid, Heart, Hourglass, Ring, Ripple, Roller, Spinner
Dropdown

Exposed states

Title
Description
Type
Is Loading
The state that defines wether or not a spinner is currently shown.
Checkbox (yes/no)
Image without caption

Changelogs