Advanced Progress Bar

Demo to preview the settings

🔗 Demo Page: http://chakor-plugins.bubbleapps.io/version-test/progress_bar

🔗 Bubble Editor: https://bubble.io/page?type=page&name=progress_bar&id=chakor-plugins&tab=tabs-1

Introduction

The Progress Bar Plugin is a highly customizable and dynamic tool designed to visually represent progress. It takes two essential inputs: the maximum value and the current value, calculating and displaying the progress percentage based on these values. Additionally, the plugin offers extensive CSS customization options, allowing users to tailor the appearance of the progress bar to suit their specific needs and preferences.

Features
1. Dynamic Progress Calculation:
Inputs:
  • Maximum Value: The total value representing 100% progress.
  • Current Value: The current progress value.
  • Output: Automatically calculates and displays the progress percentage based on the provided values.
2. Customisable Appearance:
Users can modify the CSS to change the appearance of the progress bar, including:
  • Color: Adjust the bar and background colors.
  • Size: Set the width, height, and other dimensional properties.
  • Borders: Customize border radius, style, and color.
  • Animations: Add transition effects for a smooth progress update.
3. User-Friendly Interface:
  • Simple and intuitive configuration process.
  • Real-time preview of the progress bar with applied customizations.
  • Compatible with various front-end frameworks and easy to integrate into any web application.
How to setup
Place the plugin element "progress bar" on the editor screen.
  1. Set the max value as required.
  2. Set the current value as required.
  3. Set up the CSS properties as required.


Note: If the current value is greater then the max value, the current value will become equal to the max value to calculate the correct percentage

States

1- Value (current value of percentage in number)

2- Text (current value of percentage in text)

Was this article helpful?

0 out of 0 liked this article