Gradient Progress Bar

Create stunning animated progress bars with smooth gradient transitions—two elements, endless possibilities.

About Plugin

Documentation

Install

Gradient Progress Bar provides two distinct progress bar elements with beautiful gradient effects. Gradient Progress Bar (Element 1) offers a classic fill-style progress bar with three-color gradient, while Gradient Progress Bar 2 (Element 2) features a dynamic fusion gradient that blends colors across the full width around the progress point.

Simply drag either element onto your page, connect the Progress field to a dynamic value or state, customize the gradient colors and animation speed, and the plugin handles the smooth animated transitions automatically. Both elements support optional percentage text display and expose the current progress value for use in workflows.

Preview

Go to Editor

Go to Preview

When to Use

Everything you need in a single plugin

cloud_upload

File Upload Progress

expand_more

Display real-time upload progress with visual feedback. Connect to upload workflow states to show users exactly how much has been uploaded and reduce perceived wait time.

checklist

Form Completion Tracking

expand_more

school

Learning Progress

expand_more

flag

Goal Tracking

expand_more

dashboard

Dashboard KPIs

expand_more

Benefits

style

Two Gradient Styles

Choose between classic fill gradient (Element 1) with three colors or dynamic fusion gradient (Element 2) that blends across full width. Each offers unique visual effects for different design needs.

animation

Smooth Animations

Configurable animation speed creates fluid progress transitions. CSS-based animations ensure smooth performance with minimal overhead across all devices.

palette

Full Customization

Complete control over gradient colors, background, percentage text color, and animation timing. Match your brand perfectly with flexible color options.

percent

Percentage Display

Optional centered percentage text overlay shows exact progress value. Customize text color to ensure readability against your gradient colors.

tune

Automatic Range Control

Progress values automatically clamped to 0-100 range. No need to validate input—the plugin handles edge cases seamlessly.

sync

Dynamic Values

Connect to any numeric value, custom state, calculation, or workflow output. Updates automatically when source value changes with smooth animation.

schema

Exposed States

Access current progress value in workflows and conditionals. Use for triggering actions, displaying metrics, or controlling other elements.

devices

Responsive Design

Inherits border radius from Bubble element styling and adapts to any container size. Works perfectly on desktop, tablet, and mobile devices.

style

Two Gradient Styles

Choose between classic fill gradient (Element 1) with three colors or dynamic fusion gradient (Element 2) that blends across full width. Each offers unique visual effects for different design needs.

animation

Smooth Animations

Configurable animation speed creates fluid progress transitions. CSS-based animations ensure smooth performance with minimal overhead across all devices.

palette

Full Customization

Complete control over gradient colors, background, percentage text color, and animation timing. Match your brand perfectly with flexible color options.

percent

Percentage Display

Optional centered percentage text overlay shows exact progress value. Customize text color to ensure readability against your gradient colors.

tune

Automatic Range Control

Progress values automatically clamped to 0-100 range. No need to validate input—the plugin handles edge cases seamlessly.

sync

Dynamic Values

Connect to any numeric value, custom state, calculation, or workflow output. Updates automatically when source value changes with smooth animation.

schema

Exposed States

Access current progress value in workflows and conditionals. Use for triggering actions, displaying metrics, or controlling other elements.

devices

Responsive Design

Inherits border radius from Bubble element styling and adapts to any container size. Works perfectly on desktop, tablet, and mobile devices.

style

Two Gradient Styles

Choose between classic fill gradient (Element 1) with three colors or dynamic fusion gradient (Element 2) that blends across full width. Each offers unique visual effects for different design needs.

animation

Smooth Animations

Configurable animation speed creates fluid progress transitions. CSS-based animations ensure smooth performance with minimal overhead across all devices.

palette

Full Customization

Complete control over gradient colors, background, percentage text color, and animation timing. Match your brand perfectly with flexible color options.

percent

Percentage Display

Optional centered percentage text overlay shows exact progress value. Customize text color to ensure readability against your gradient colors.

tune

Automatic Range Control

Progress values automatically clamped to 0-100 range. No need to validate input—the plugin handles edge cases seamlessly.

sync

Dynamic Values

Connect to any numeric value, custom state, calculation, or workflow output. Updates automatically when source value changes with smooth animation.

schema

Exposed States

Access current progress value in workflows and conditionals. Use for triggering actions, displaying metrics, or controlling other elements.

devices

Responsive Design

Inherits border radius from Bubble element styling and adapts to any container size. Works perfectly on desktop, tablet, and mobile devices.

Key Features

Everything you need in a single plugin

format_color_fill

Classic Fill Gradient (Element 1)

expand_more

Three-color gradient (start, intermediate, end)
Fills from left to right as progress increases
Customizable background color for unfilled portion
Perfect for traditional progress visualization
Smooth width-based animation transitions

gradient

Dynamic Fusion Gradient (Element 2)

expand_more

Two-color gradient with fusion blend effect
Colors blend across full width around progress point
20% fusion zone creates smooth color transition
Artistic, modern appearance
Background-based animation transitions

speed

Configurable Animation

expand_more

Set animation speed in milliseconds
Recommended range: 200-1000ms
Fast speeds for responsive feel
Slow speeds for dramatic effect
CSS transition-based for smooth performance

text_fields

Percentage Overlay

expand_more

Optional centered percentage text
Customizable text color
Bold font weight for visibility
Positioned with absolute centering
Toggle on/off with checkbox

calculate

Smart Value Handling

expand_more

Automatic clamping to 0-100 range
Handles decimal values
Works with dynamic calculations
Connects to custom states and workflows
Real-time updates when source changes

format_paint

Style Inheritance

expand_more

Inherits border-radius from Bubble element
Adapts to container dimensions
Responsive width and height
Works with Bubble's styling system
Professional appearance out of the box

Documentation

FAQ

Common questions

helpWhich element should I use?

helpCan I connect it to file uploads?

helpHow do I calculate progress percentage?

helpWhat animation speed should I use?

helpCan I use custom gradient colors?

helpDoes the percentage text adapt to gradient colors?

helpCan I use multiple progress bars on one page?

helpHow do I make rounded progress bars?

helpDoes it work with workflows?

helpWhat happens if progress exceeds 100?

Contato