MARKETPLACE
PLUGINS
CUSTOM PROGRESS BAR
Custom Progress Bar logo

Custom Progress Bar

Published June 2022
   •    Updated this week

Plugin details

This small and fast pure JS Custom Progress Bar plugin allows you to configure many options such as:
1. Current and total values dynamic symbol or text.
2. Border radius.
3. Background color.
4. Bar color.
5. Font, size and color for values.
6. Show/hide current and total value.
7. Bar height.
8. Text (line) height.
9. Text alignment (left, center, right).
10. Text padding.
11. Hiding the total value when a certain percentage is reached.
12. Scale of value.
13. Duration to reach total value.
14. Vertical progress bar
15. Vertical total value and current value
16. Timeout to start showing current value
17. Current and Total value symbol can be placed before value.

Almost all values ​​can be dynamic.

Plugin doesn't have any dependencies, pure JS+CSS.

The plugin was created for the new responsive engine so not sure if it correctly works with old responsive.

You can find run mode app example here:

https://testliveversion.bubbleapps.io/version-test/progressbar

Edit mode link:

https://bubble.io/page?type=page&name=progressbar&version=live&id=testliveversion

The plugin is distributed "as is".

You can request changes or feature additions by email to [email protected], but since the plugin is free, I can't promise I can help, but I'll try.

Free

For everyone

4.7 stars   •   6 ratings
4.9K installs
This plugin does not collect or track your personal data.

Other actions

Platform

Web

Contributor details

kursin.com logo
kursin.com
Joined 2021   •   4 Plugins
View contributor profile

Instructions

Place a Custom Progress Bar element on the page, setup all needed values and use.
Be sure to enter bar height and line height corresponding to needed values, for example, you can setup same values as element height.

If you need to use border-radius > 0 of the whole element, but also border-radius = 0 of the bar element, better to use border-radius settings of Bubble element (value Roundness).

Important notice for all old responsive engine users: if you have a problem with an element visibility you have to add to the headers or to HTML element on your page something like this:

<style>
#progressbar1 {
height: 50px !important;
}
</style>

where progressbar1 is ID of your progressbar element and you can adjust 50px to your height value.

Types

This plugin can be found under the following types:
Element

Categories

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

Resources

Support contact
Documentation
Tutorial

Rating and reviews

Average rating (4.7)

Funciona realmente muito bem
February 20th, 2025
O meu problema foi ao tentar ocultar a barra, não consegui adicionar uma condição que fizesse ela não aparecer, sempre ficava visível, não sei porque.
Great plugin
August 1st, 2024
Works great, but eventually it may be necessary to adjust a wait timeout so everything loads perfectly
Excelent!
July 13th, 2024
The greatest progress bar you can find
January 5th, 2023
This plugin allows you to entirely customize your progress bar, it's well-made and explained. I recommend!
Excellent Plugin!
December 22nd, 2022
Does exactly what is expected. Hopefully option to do conditional formatting off progress bar value is added. That would make it perfect!
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Immerse
Early access
Store
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales