# How to create a loading progress bar in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 10-15 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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 code example

File: `Workflow summary`

```text
PROGRESS BAR SETUP
===================

ELEMENTS:
  Group: ProgressTrack
    Width: 100%, Height: 10px
    Background: #E5E7EB (light gray)
    Border radius: 5px
    Visible when: progress > 0

  Shape: ProgressFill (inside ProgressTrack)
    Width: (progress / 100) * ProgressTrack width
    Height: 100%, Background: #3B82F6 (blue)
    Border radius: 5px
    Transition: width 0.3s ease

  Text: ProgressText
    Content: "[progress]%"
    Visible when: progress > 0

CUSTOM STATE:
  Page → progress (number, default: 0)

WORKFLOW EXAMPLE (form submission):
  1. Set state: progress = 10
  2. Create database record
  3. Set state: progress = 40
  4. Upload file to storage
  5. Set state: progress = 70
  6. Send confirmation email
  7. Set state: progress = 100
  8. Pause: 500ms
  9. Set state: progress = 0
  10. Show success message

INDETERMINATE LOADING BAR:
  Alternative: use CSS animation
  HTML element with:
    <div class="loading-bar">
      <div class="loading-fill"></div>
    </div>
    <style>
    .loading-fill {
      width: 30%; height: 100%;
      background: #3B82F6;
      animation: loading 1.5s infinite;
    }
    @keyframes loading {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(400%); }
    }
    </style>
```

## Common mistakes

- **Not adding smooth transitions to the width change** — Without transitions, the progress bar jumps abruptly between values instead of animating smoothly Fix: Add a CSS transition (width 0.3s ease) to the fill Shape element via custom CSS or an HTML element
- **Setting progress values too quickly** — If workflow steps execute faster than the visual update, users see the bar jump from 0 to 100 instantly Fix: Add brief pauses between workflow steps to give the visual transition time to display
- **Not resetting progress to 0 after completion** — The progress bar stays at 100% forever, cluttering the interface for subsequent operations Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/create-a-loading-progress-bar-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/create-a-loading-progress-bar-in-bubble