MARKETPLACE
PLUGINS
CUSTOMIZABLE PROGRESS BAR - 3 TYPES
Customizable Progress Bar - 3 Types logo

Customizable Progress Bar - 3 Types

Published July 2024
   •    Updated this month

Plugin details

Offers rectangular, semi-circular, and circular types. Responsive, customizable maximum and target values, trail and fill colors, label font size and color, and stroke width for circular/semi-circular types. Choose horizontal or vertical orientation for rectangular bars and customize roundness and border styles.
MAIN FEATURES
➡️ Three Progress Bar Types: Choose from rectangular, semi-circular, or circular progress bars.
➡️ Responsive Design: Adapts to various screen sizes for consistent display.
➡️ Customizable Values: Set maximum and target values to track progress.
➡️ Trail and Fill Colors: Personalize the colors for both the trail and the fill.
➡️ Label Customization: Adjust label font size, color, and add a suffix.
➡️ Stroke Width Control: Customize the stroke width for both trail & progress path. (for circular and semi-circular progress bars)
➡️ Orientation Options: Choose between horizontal and vertical orientation. (for rectangular bars)
➡️ Rounded Corners: Rounded corners for elegant look (Customizable).
➡️ You can also change the behavior of progress bar like styles, etc. by setting conditions in plugin's state. (for example, when value>60 change color to green)

Editor: https://bubble.io/page?type=page&name=progress_bar_demo&id=pluginpreviewapp&test_plugin=1706790232590x616352533947351000_current&tab=tabs-1

Demo: https://pluginpreviewapp.bubbleapps.io/version-test/progress_bar_demo

Other Plugins

$12

One time  •  Or  $5/mo

stars   •   0 ratings
708 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Snipcode logo
Snipcode
Joined 2022   •   27 Plugins
View contributor profile

Instructions

1. Search for progress_bar in the elements panel and place it on the page. 2. Choose the type -> rectangular, circular, or semi-circular.
3. Set max & target values.
4. Customize colors and styles.
5. Set orientation as horizontal/vertical (for rectangular bar).

*You can extract current target value in plugin's state.

Types

This plugin can be found under the following types:

Categories

This plugin can be found under the following categories:
Analytics   •   Chart   •   Health & Fitness   •   Small Business   •   Ecommerce   •   Visual Elements

Resources

Support contact
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble
CoAlias Logo Powered by CoAlias