Gradient Progress Bar
Create stunning animated progress bars with smooth gradient transitions—two elements, endless possibilities.
5
Rating
43
Installs
v1.0.2
Version
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.
When to Use
Everything you need in a single plugin
File Upload Progress
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.
Form Completion Tracking
Show users their progress through multi-step forms. Calculate percentage from completed steps to encourage form completion and reduce abandonment rates.
Learning Progress
Track student progress through courses or lessons. Motivate continued learning by visualizing achievement and helping students track their educational journey.
Goal Tracking
Visualize progress towards financial, fitness, or business goals. Provide clear visual feedback that motivates goal pursuit and celebrates progress milestones.
Dashboard KPIs
Display key performance indicators on dashboards with engaging visual elements. More impactful than numbers alone for at-a-glance metric understanding.
Benefits
Everything you need in a single plugin
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.
Smooth Animations
Configurable animation speed creates fluid progress transitions. CSS-based animations ensure smooth performance with minimal overhead across all devices.
Full Customization
Complete control over gradient colors, background, percentage text color, and animation timing. Match your brand perfectly with flexible color options.
Percentage Display
Optional centered percentage text overlay shows exact progress value. Customize text color to ensure readability against your gradient colors.
Automatic Range Control
Progress values automatically clamped to 0-100 range. No need to validate input—the plugin handles edge cases seamlessly.
Dynamic Values
Connect to any numeric value, custom state, calculation, or workflow output. Updates automatically when source value changes with smooth animation.
Exposed States
Access current progress value in workflows and conditionals. Use for triggering actions, displaying metrics, or controlling other elements.
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
Classic Fill Gradient (Element 1)
- 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
Dynamic Fusion Gradient (Element 2)
- 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
Configurable Animation
- 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
Percentage Overlay
- Optional centered percentage text
- Customizable text color
- Bold font weight for visibility
- Positioned with absolute centering
- Toggle on/off with checkbox
Smart Value Handling
- 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
Style Inheritance
- 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
Common Questions
Everything you need to know before installing
Which element should I use?
Use Gradient Progress Bar (Element 1) for traditional fill-style progress with three colors and background control. Use Gradient Progress Bar 2 (Element 2) for dynamic fusion gradient effects with artistic color blending. Choose based on your design preference.
Can I connect it to file uploads?
Yes, connect the Progress field to your upload workflow's progress state or API response. The progress bar will update automatically as the upload progresses, providing real-time visual feedback to users.
How do I calculate progress percentage?
Use the formula: (completed / total) × 100. For example, if tracking form completion, calculate: (completed_fields / total_fields) × 100. Always ensure total is not zero to avoid division errors.
What animation speed should I use?
Use 200-300ms for fast, responsive interactions like loading indicators. Use 300-500ms for standard progress tracking. Use 500-1000ms for dramatic effects or significant milestones. Faster speeds feel more responsive; slower speeds feel more significant.
Can I use custom gradient colors?
Absolutely. All gradient colors are fully customizable using hex codes, RGB values, or CSS color names. Element 1 supports three gradient colors plus background. Element 2 supports two gradient colors with dynamic blending.
Does the percentage text adapt to gradient colors?
You control the percentage text color manually. Choose a color with good contrast against your gradient. Use white for dark gradients, black for light gradients, or semi-transparent colors for mixed gradients.
Can I use multiple progress bars on one page?
Yes, you can place as many progress bar elements as needed. Each can have independent progress values, colors, and animation speeds. Perfect for dashboards or multi-metric displays.
How do I make rounded progress bars?
Use the border-radius setting in the Bubble element style editor. The progress bar automatically inherits this radius. Use small values (4-8px) for subtle rounding or large values (20-40px) for pill-shaped bars.
Does it work with workflows?
Yes, connect the Progress field to custom states and update them via workflows. The exposed value state also allows you to trigger workflows based on progress thresholds or use the value in conditions.
What happens if progress exceeds 100?
Progress values are automatically clamped to the 0-100 range. If you pass 150, it displays as 100%. If you pass -10, it displays as 0%. No error handling needed—the plugin handles edge cases gracefully.