Custom Refresh Bar

Brandarrow's official documentation for Custom Refresh Bar – Bubble.io Plugin.

---

Vitals

Description

The Custom Refresh Bar plugin replaces Bubble’s default refresh bar with a sleek, fully customizable version that can be controlled via workflows. It allows you to tailor the appearance, positioning, and behavior of the refresh bar, ensuring a polished and seamless user experience across devices without impacting app performance.

Key Features

• Customizable Appearance: Adjust the refresh bar’s icon, colors, and styling.

• Flexible Positioning: Control the placement of the refresh bar on the page.

• Seamless Integration: Works across all pages or reusable elements.

• Lightweight and Fast: Designed to maintain optimal app performance.

Price

Free

Installation

Custom Refresh Bar Plugin for BubbleBubble

Add the plugin to your Bubble app via the official plugin marketplace.

Demo & Editor

Demo Editor

---

Instructions

1

Add the Workflow Action

In a workflow, add the Add Custom Refresh Bar action, typically triggered on page load.

2

Configure Settings

Customize the refresh bar’s properties, including:

• Icon (select from built-in options).

• Position (e.g., top, bottom, or custom placement).

• Animation settings.

• Colors and other styling options.

3

Preview the App

Reload the page in preview mode to test the custom refresh bar’s appearance and behavior.

That's it you are ready to use the plugin

Component

Element

None

Actions

• Add Custom Refresh Bar : Triggers the display of the customized refresh bar with specified settings.

Events

None

Data calls

None

---

Common Issues & Troubleshooting

Issue	Cause	Solution	Status
Custom Bar Not Displaying	Workflow not triggered or blocked by conditions	Ensure the Add Custom Refresh Bar action is triggered on page load in the workflow. Verify the workflow is not conditional or blocked by other logic.	Shipped
Styling Not Applied Properly	Incorrect customization settings or conflicting CSS/scripts	Double-check customization fields (e.g., colors, icon, position) in the action settings. Ensure no conflicting CSS or custom scripts are overriding the styles.	Shipped
Bar Appears Behind Elements	Overlapping elements or low z-index	Check for overlapping groups or floating elements and adjust their z-index. Increase the z-index of the refresh bar in the action settings if supported.	Shipped
Default Bar Still Showing	Cached scripts or conflicting plugins/scripts	Clear your browser cache to ensure no cached scripts are interfering. Disable any conflicting custom scripts or plugins affecting the refresh bar.	Shipped
Mobile Positioning Issues	Non-responsive settings or incorrect positioning	Test the refresh bar on mobile devices and adjust positioning settings if needed. Verify that the plugin’s mobile responsiveness settings are correctly configured.	Shipped

---

Version	Status	Date	Changes
v1.0.0	Shipped	1/6/25	Initial release

---

Need Help?

Help & Support

---