Progress indicator using a “Business Process Flow” style - #ARCHIVED#

This content has been archived. It may no longer be relevant.  

My Twitter handle is: formsandflows. Send me a DM if you find any bugs in this component and I will try to fix them as quickly as possible.

How to use it

This component has 6 input properties. They are described below.


  • The color used for the current or a previous stage.
  • Type: Color


  • The color used for a next stage.
  • Type: Color

The number of the current stage. Numbering starts at 1.

Type: Number


  • The items. The number of items can be dynamic. You do need to take care yourself that the this component is wide enough to show all text.
  • Type: Table

Example used in screen above:

    {ID:2,Title:"Quarter 1"},
    {ID:3,Title:"Quarter 2"},
    {ID:4,Title:"Quarter 3"},
    {ID:5,Title:"Quarter 4"},


  • The color of the text.
  • Type: Color


  • The font of the text.
  • Type: Text

How it works

  • The stages are shown using a gallery.
  • The gallery has a padding of 0.
  • The width of a gallery item is calculated by dividing the width of the gallery by the number of items.
  • 3 circle shapes are used to show the “icons”.
  • 2 rectangle shapes are used to connect the “icons”.
  • The circles need to be higher in the hierarchy than the rectangles.

A big thanks to Matthew Devaney for his component “Progress Indicator Component” which was used as an inspiration for this component.


This component can be downloaded from GitHub.