BubbleProgressBar
Progress bars and KPI widgets for your Bubble app.
Overview
BubbleProgressBar drops a polished progress indicator into any Bubble page. Use it to show project progress, fundraising goals, skill levels, onboarding steps, or any KPI that needs a visual meter. Pick from three styles — linear bars, circular rings, or stepped indicators — match it to your brand, and ship in minutes. No plugins, no workflows required.
Features
- Three styles: linear bar, circular ring, and stepped indicators
- Animated fill on load (toggleable)
- Custom primary color with optional gradient fill
- Per-bar color overrides
- Optional label and percentage display
- Label position for linear bars: top, inside, or bottom
- Up to six bars or KPIs in a single embed
- Adjustable height, spacing, rounded ends, and background
- Works on every Bubble plan, including free
How to use
- 1
Go to rsvpscale.in/tools/bubbleprogressbar
Open the live builder.
- 2
Choose your style
Linear for project progress, circular for goals, stepped for onboarding flows.
- 3
Add your bars and values
Set a label and a 0–100 percentage for each bar. Add up to six.
- 4
Customize colors and layout
Pick a primary color, toggle the gradient, set height, spacing, and labels.
- 5
Click "Get Embed Code"
Builder generates the iframe snippet.
- 6
Paste into Bubble HTML element
Drop, paste, ship.
Embed code example
<iframe
id="bubbleprogressbar-iframe"
src="https://rsvpscale.in/embed/progressbar?config=<your-config>"
style="width: 100%; border: 0; background: transparent; height: 0; transition: height 200ms ease;"
allowtransparency="true"
></iframe>
<script>
(function(){
window.addEventListener('message', function(e) {
if (e.data && e.data.type === 'bubbleprogressbar:height') {
var f = document.getElementById('bubbleprogressbar-iframe');
if (f) f.style.height = e.data.height + 'px';
}
});
})();
</script>