[NEW PLUGIN] Pro Progress Bars!

Showcase
1

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
2

Once the plugin is added inside a repeating group, my application fails to load.

3

@franklyn Thanks for reaching out here. Could you provide either one:

  • Screenshots of repeating-group, the progress bar element, workflows and any other element / action you consider is relevant.
  • Edit access to your app so I can solve the issue on your end.
    Thanks
4

Same here, added to a repeating group and the page is now loading empty , looks like the element brakes the repeating group.

5

Hello @ed16 , I’m aware of the issue and I’m trying to address this asap. One quick fix: put the progress bar in a group (inside the repeating group) and have the repeating group as a ‘vertical scroll’

1 Like
6

Thank you for your response, @segongora9
I can’t set RG to vertical scroll as I’m using the responsive UI, so for now I am trying to implement the element in another page, but I have another issue now:
I’m trying to get a 3 to 5 px progress bar like in this screenshot, but regardless of my settings, I am unable to achieve the result. A help would be very appreciated.
Screen Shot 2022-01-26 at 0.00.57

7

@ed16 Have you taken a look at the demo?

In the editor. find the ProgressBar CIRCLE 3 and that should help you

8

@segongora9 Nice Plugin. I like the style and the flexibilty. Unfortunately it is not compatible with the new responsive engine and repeating groups - as mentioned before in the forum. What is your timeline to fix this?