All Plugins
Pro Progress Bars
Free
Display progress bars with 3 different designs: Lines, Semicircles and Circles
About
[b]Enhance your Bubble.io applications with our versatile Progress Bar Element Plugin.[/b] 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. [b]Key Features:[/b] [ml][ul][li indent=0 align=left][b]Multiple Formats:[/b] Choose from line, circle, or semicircle formats to suit your design needs.[/li][li indent=0 align=left][b]Highly Customizable:[/b] Tailor the progress bar to fit your exact specifications with a wide range of customizable attributes:[/li][ul data=1][li indent=1 align=left][b]Percentage:[/b] Set the completion percentage.[/li][li indent=1 align=left][b]Progress:[/b] Display the current progress.[/li][li indent=1 align=left][b]Percentage Text:[/b] Show or hide the percentage text.[/li][li indent=1 align=left][b]Animation Duration:[/b] Adjust the duration of the progress animation.[/li][li indent=1 align=left][b]Starting Color:[/b] Choose the starting color of the progress bar.[/li][li indent=1 align=left][b]Ending Color:[/b] Set the ending color for a gradient effect.[/li][li indent=1 align=left][b]Starting Width:[/b] Define the initial width of the progress bar.[/li][li indent=1 align=left][b]Ending Width:[/b] Set the final width of the progress bar.[/li][li indent=1 align=left][b]Stroke Width:[/b] Customize the thickness of the progress bar.[/li][li indent=1 align=left][b]Trail Width:[/b] Define the width of the trail (background path).[/li][li indent=1 align=left][b]Trail Color:[/b] Choose a color for the trail to enhance contrast and visibility.[/li][/ul][/ul][/ml] [b]Why Choose the Progress Bar Element Plugin?[/b] [ml][ul][li indent=0 align=left][b]Attractive Visuals:[/b] Create visually appealing progress bars that enhance the user interface and experience.[/li][li indent=0 align=left][b]Easy Integration:[/b] Seamlessly integrate the progress bar into any Bubble.io project with minimal effort.[/li][li indent=0 align=left][b]Flexible Customization:[/b] Adapt the progress bar to match your project's design and functionality requirements.[/li][/ul][/ml] [b]Unlock the full potential of your Bubble.io applications with the Progress Bar Element Plugin.[/b] Create dynamic and engaging progress indicators that provide clear visual feedback to users, enhancing the overall user experience. [ml][ul][li indent=0 align=left][b]Demo:[/b] [url=https://datamatic-05.bubbleapps.io/version-test/pro-progress-bar]https://datamatic-05.bubbleapps.io/version-test/pro-progress-bar[/url][/li][li indent=0 align=left][b]Documentation:[/b] [url=https://plugins.datamaticsoftware.com/documentation?plugin=pro-progress-bar]https://plugins.datamaticsoftware.com/documentation?plugin=pro-progress-bar[/url][/li][li indent=0 align=left][b]Editor:[/b] [url=https://bubble.io/page?type=page&name=pro-progress-bar&id=datamatic-05&tab=tabs-1]https://bubble.io/page?type=page&name=pro-progress-bar&id=datamatic-05&tab=tabs-1[/url][/li][/ul][/ml]
Setup Instructions
This are step-by-step instructions on how to get the plugin working on any Bubble App.
[ml][ol][li indent=0 align=left]Add this plugin to your application.[/li][li indent=0 align=left]Drag element 'Progress Bar' into your Bubble Editor.[/li][li indent=0 align=left]Set the percentage to a dynamic value[/li][ol data=1][li indent=1 align=left]Remember to also add a value that will increase[/li][/ol][li indent=0 align=left]Set progress to 0[/li][li indent=0 align=left]Set Type as Circle[/li][li indent=0 align=left]Set Colors, Animation duration and stroke widths.[/li][/ol][/ml]
Full Documentation
This plugin will give you a [b]Progress Bar[/b] as an Element and [b]Update A Progress Bar[/b] as an Action. You need to add the Element to your Editor and set the Percentage, Stroke Colors, and Type for the plugin to work.