A loading progress bar in Bubble uses a custom state to track progress percentage, a Shape element whose width changes dynamically, and workflow steps that increment the state. This tutorial covers building a visual progress bar for multi-step processes, form submissions, and data loading operations.
Overview: Creating a Loading Progress Bar in Bubble
Progress bars give users visual feedback during long operations. Bubble does not have a native progress bar element, but you can build one using a Shape element whose width is controlled by a custom state. This tutorial shows you how to build both determinate (percentage-based) and indeterminate (loading animation) progress bars.
Prerequisites
- A Bubble app with a page where you need progress feedback
- Basic understanding of custom states and conditionals
- Familiarity with Shape elements and the Appearance tab
Step-by-step guide
Create the progress bar structure
Create the progress bar structure
Add a Group element as the track (background). Set it to a fixed width (e.g., 300px or 100% of container), height of 8-12px, with a light gray background and rounded corners. Inside it, add a Shape element as the fill (progress indicator). Set its height to 100% of the parent, background to your brand color, and rounded corners matching the parent. Create a custom state on the page called progress (type: number, default: 0).
Expected result: A visual bar track with a colored fill shape inside it.
Make the fill width dynamic
Make the fill width dynamic
Select the fill Shape element. Set its width to a dynamic expression: progress * 3 (if the track is 300px) or use percentage calculation. For percentage-based width, set the Shape's min-width to 0 and max-width to the track width, then use a conditional: width = (progress / 100) * track_width. Add a CSS transition for smooth animation via the HTML element or the Appearance tab's transition settings.
Pro tip: Add a CSS transition on the Shape element for smooth width changes: transition: width 0.3s ease. Apply this via an HTML element or custom CSS plugin.
Expected result: The progress bar fill smoothly grows as the progress state increases.
Update progress during a multi-step workflow
Update progress during a multi-step workflow
In your workflow (e.g., a form submission with multiple steps), add Set State actions between major steps to update the progress value. Step 1: Set progress = 25. After database save: Set progress = 50. After email send: Set progress = 75. On completion: Set progress = 100. Add brief pauses between steps if they execute too quickly for the visual effect.
Expected result: The progress bar advances through each step of the workflow.
Add percentage text display
Add percentage text display
Add a Text element positioned over or below the progress bar. Set its content to: progress's value formatted as a number followed by %. This shows users the exact percentage alongside the visual bar. For a cleaner look, position the text inside the track group and center it.
Expected result: A percentage number displays alongside or inside the progress bar.
Reset and hide the progress bar on completion
Reset and hide the progress bar on completion
When progress reaches 100, add a brief pause (500ms), then set progress back to 0 and hide the progress bar group. Optionally show a success message or checkmark icon. Use a condition on the progress bar group: visible only when progress > 0 AND progress < 100.
Expected result: The progress bar disappears after the operation completes.
Complete working example
1PROGRESS BAR SETUP2===================34ELEMENTS:5 Group: ProgressTrack6 Width: 100%, Height: 10px7 Background: #E5E7EB (light gray)8 Border radius: 5px9 Visible when: progress > 01011 Shape: ProgressFill (inside ProgressTrack)12 Width: (progress / 100) * ProgressTrack width13 Height: 100%, Background: #3B82F6 (blue)14 Border radius: 5px15 Transition: width 0.3s ease1617 Text: ProgressText18 Content: "[progress]%"19 Visible when: progress > 02021CUSTOM STATE:22 Page → progress (number, default: 0)2324WORKFLOW EXAMPLE (form submission):25 1. Set state: progress = 1026 2. Create database record27 3. Set state: progress = 4028 4. Upload file to storage29 5. Set state: progress = 7030 6. Send confirmation email31 7. Set state: progress = 10032 8. Pause: 500ms33 9. Set state: progress = 034 10. Show success message3536INDETERMINATE LOADING BAR:37 Alternative: use CSS animation38 HTML element with:39 <div class="loading-bar">40 <div class="loading-fill"></div>41 </div>42 <style>43 .loading-fill {44 width: 30%; height: 100%;45 background: #3B82F6;46 animation: loading 1.5s infinite;47 }48 @keyframes loading {49 0% { transform: translateX(-100%); }50 100% { transform: translateX(400%); }51 }52 </style>Common mistakes when creating a loading progress bar in Bubble.io: Step-by-Step Guide
Why it's a problem: Not adding smooth transitions to the width change
How to avoid: Add a CSS transition (width 0.3s ease) to the fill Shape element via custom CSS or an HTML element
Why it's a problem: Setting progress values too quickly
How to avoid: Add brief pauses between workflow steps to give the visual transition time to display
Why it's a problem: Not resetting progress to 0 after completion
How to avoid: Reset the progress state to 0 after a brief delay and hide the progress bar group
Best practices
- Use CSS transitions for smooth progress bar animation
- Add a percentage text display for precise feedback
- Reset and hide the progress bar after the operation completes
- Use determinate (percentage) bars for known multi-step processes
- Use indeterminate (animated) bars for operations with unknown duration
- Keep the progress bar visually prominent but not obstructive
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to add a loading progress bar to my Bubble.io app that shows visual progress during a multi-step form submission. The bar should animate smoothly and show a percentage. How do I build this?
Add a progress bar to my form submission page. It should show visual progress as the form saves data, uploads files, and sends emails. Animate smoothly and show percentage complete.
Frequently asked questions
Can I use a plugin for progress bars?
Yes. Several Bubble plugins provide pre-built progress bar elements with animation. However, building your own gives you full control over styling and behavior.
How do I create an indeterminate loading animation?
Use an HTML element with CSS keyframe animation that slides a colored bar back and forth continuously. This is shown in the complete code section above.
Does the progress bar work with backend workflows?
Backend workflows run asynchronously, so you cannot track their progress in real time from the frontend. Use a polling approach: check a database field that the backend workflow updates, and refresh the progress bar based on that value.
Can I add multiple progress bars on one page?
Yes. Use separate custom states for each progress bar (e.g., upload_progress, save_progress) and bind each bar's width to its respective state.
How do I make the progress bar accessible?
Add an HTML element with an ARIA progress bar: <div role="progressbar" aria-valuenow="[progress]" aria-valuemin="0" aria-valuemax="100">. RapidDev can help build accessible UI components in Bubble.
Can I change the color based on progress?
Yes. Add conditionals on the fill Shape: when progress < 33, background = red; when progress < 66, background = yellow; when progress >= 66, background = green.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation