Forum Academy Marketplace Showcase Pricing Features

[NEW PLUGIN] Pro Progress Bars!

Hey everyone! Excited with this new plugin

Highly customizable progress bars!
This plugin will give you a Progress Bar as an Element and Update A Progress Bar 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.

The element has the following properties to be used:

  • Percentage: Percentage of progress bar. Values from 0 to 100.

  • Progress: Sets progress instantly without animation. Clears all animations for path. Values from 0 to 100.

  • Show Percentage?: Set percentage text visibility.

  • Type: Progress Bar type. Available options:

    • Circle (Suggested canvas size: 100x100)

    • Semicircle (Suggested canvas size: 100x50)

    • Line (Suggested canvas size: 200x50)

  • Animation duration: Duration of the animation in miliseconds. Default is 1400

  • Starting Color: Start color of stroke

  • Ending Color: Ending color of stroke

  • Starting Width: Start width of stroke

  • Ending Width: End width of stroke

  • Stroke Width: Width of the stroke

  • Trail Width: Width of the trail. Trail is always centered relative to actual progress path.

  • Trail Color: Color for lighter trail stroke underneath the actual progress path.

The element also has an exposed state that can be accesed in ‘This element’s current event’:

  • percentage: Value of progress bar’s percentage

The actions included in this plugin are the following:

  • Update percentage: Update percentage of Progress Bar based on actions. Can be accesed in Workflow → Element Actions. *Note that a Progress Bar must be visible in the Bubble Editor

You can take a look at the demo: :computer: Demo
The documentation: :memo: Docs

2 Likes