MARKETPLACE
PLUGINS
PRO PROGRESS BARS
Pro Progress Bars logo

Pro Progress Bars

Published August 2021
   •    Updated June 2025

Plugin details

Enhance your Bubble.io applications with our versatile Progress Bar Element Plugin. This plugin allows you to display an attractive flat progress bar in various formats, including line, circle, or semicircle, making it perfect for visualizing progress in a wide range of scenarios.
Key Features:
  • Multiple Formats: Choose from line, circle, or semicircle formats to suit your design needs.
  • Highly Customizable: Tailor the progress bar to fit your exact specifications with a wide range of customizable attributes:
    • Percentage: Set the completion percentage.
    • Progress: Display the current progress.
    • Percentage Text: Show or hide the percentage text.
    • Animation Duration: Adjust the duration of the progress animation.
    • Starting Color: Choose the starting color of the progress bar.
    • Ending Color: Set the ending color for a gradient effect.
    • Starting Width: Define the initial width of the progress bar.
    • Ending Width: Set the final width of the progress bar.
    • Stroke Width: Customize the thickness of the progress bar.
    • Trail Width: Define the width of the trail (background path).
    • Trail Color: Choose a color for the trail to enhance contrast and visibility.

Why Choose the Progress Bar Element Plugin?
  • Attractive Visuals: Create visually appealing progress bars that enhance the user interface and experience.
  • Easy Integration: Seamlessly integrate the progress bar into any Bubble.io project with minimal effort.
  • Flexible Customization: Adapt the progress bar to match your project's design and functionality requirements.

Unlock the full potential of your Bubble.io applications with the Progress Bar Element Plugin. Create dynamic and engaging progress indicators that provide clear visual feedback to users, enhancing the overall user experience.

$59

One time  •  Or  $8/mo

3.0 stars   •   3 ratings
59 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Datamatic Software logo
Datamatic Software
Joined 2022   •   36 Plugins
View contributor profile

Instructions

This are step-by-step instructions on how to get the plugin working on any Bubble App.
  1. Add this plugin to your application.
  2. Drag element 'Progress Bar' into your Bubble Editor.
  3. Set the percentage to a dynamic value
    1. Remember to also add a value that will increase
  4. Set progress to 0
  5. Set Type as Circle
  6. Set Colors, Animation duration and stroke widths.

Types

This plugin can be found under the following types:
Background Services   •   Element   •   Action

Categories

This plugin can be found under the following categories:
Technical   •   Containers   •   Productivity   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

Average rating (3.0)

Works as described
March 1st, 2023
Good
Doesn't work
January 4th, 2023
Gives a ton of errors. Doesnt appear to work with the new responsive engine.
PLUGIN BREAKS MY APP
January 11th, 2022
The plugin is not loading and breaks my app. Please fix!!!
Hello, could you be able to post in the forum some insights on what's the problem you're having? https://forum.bubble.io/t/new-plugin-pro-progress-bars/164353 Thanks! (plugin author)
January 11th, 2022
  •  
Original reviewer
Once the plugin is added inside a repeating group, my application fails to load.
January 13th, 2022
  •  
Original reviewer
Bubble