Bring a touch of elegance and clarity to your app’s loading moments with this Simple loading spinner, Material Design inspired spinner. Designed for flexibility and ease of use, the spinner lets you customize its look and feel to match your app’s style no coding required.
Adjust the size with just a few tweaks to the radius and stroke width, pick any color that fits your brand, and set your preferred animation speed for smooth, polished motion. You can even place multiple spinners on a single page to visually represent loading activity across different sections of your app.
Perfect for keeping users engaged while content loads, this spinner combines simplicity, modern design, and full customization in one lightweight element.
Prerequisites
Before using the Material Design Spinner element, make sure the following are in place:
Plugin Installed: The spinner element must be added to your Bubble app from the plugin library.
Page Setup: You have at least one page or reusable element where the spinner will be placed.
Design Mode Access: You can open the Bubble editor’s Design tab to drag and configure the spinner element.
Optional Styling Knowledge: Basic understanding of Bubble styling (e.g., using color pickers and layout adjustments) will help you fine-tune the spinner’s appearance.
How to setup
Step 1 – Install the Plugin
Go to the Plugin Tab
Open your Bubble Editor.
Navigate to the Plugins tab on the left panel.
Add Plugins
Once in the Plugins tab, click the Add Plugins button.
Search for the Plugin
Use the search bar to type Material Design Spinner.
Locate the plugin in the search results.
Install/Buy
If the plugin is free, click Install to add it to your application.
For a paid plugin, click Buy and follow the purchase instructions.
Payment Information (For Paid Plugins)
If the plugin is a paid one, fill in your payment details and make payment.
Charges will be added to your Bubble billing account.
Remember, if you unsubscribe from the plugin shortly after installation, charges will be prorated based on the days used.
Plugin Installed
Once installed, the plugin will appear under the Installed Plugins list in your Bubble Editor.
Step 2 – Add the Plugin Element to Your Page
Open the Design tab in your Bubble editor.
Search for the Spinner element in the Elements panel.
You’ll see one option:
Spinner
Drag and drop the element onto your page.
Step 3 – Configure Properties
Select the Spinner element on your page and configure its properties in the Property Editor. Each field controls how the spinner appears and behaves on the screen.
Radius - Defines the size of the spinner in pixels. A higher value makes the spinner larger. (Example: 75)
Stroke Width - Controls the thickness of the spinner’s circular line. Adjust this to make the spinner lighter or bolder. (Example: 5)
Duration - Sets how long it takes for the spinner to complete one full rotation, in seconds. (Example: 5 seconds per rotation)
Color - Determines the spinner’s color. You can use a HEX color code or select from the color picker to match your app’s design. (Example: #1AAFD0)
Plugin Element Properties - Spinner
Fields:
Title
Description
Type
Radius
Sets the size of the spinner’s circular shape, measured in pixels.
Number
Stroke Width
Adjusts how thick or thin the spinner’s ring appears, measured in pixels.
Number
Duration
Defines how long it takes for the spinner to complete one full rotation, in seconds.
Number
Color
Lets you choose the spinner’s color. You can pick from the color palette or enter a HEX code.
