Docs
Premium components
Progress bar
Premium feature

This is a premium feature which requires a paid plan to be used. See here for more details.

Progress bar

The progress bar component is used to display a progress through various named stages.

Example JSON

Below are two examples of the JSON required to define a Progress Bar component:

{
    "type": "ProgressBar",
    "options": {
        "progress": 50,
        "stages": [
            {
                "name": "Stage 1"
            },
            {
                "name": "Stage 2"
            },
            {
                "name": "Stage 3"
            }
        ]
    }
},
{
    "type": "ProgressBar",
    "options": {
        "width": "1/3",
        "title": "Consecteur adipsicing et al",
        "progress": 33,
        "stages": [
            {
                "name": "Stage 1"
            },
            {
                "name": "Stage 2"
            },
            {
                "name": "Stage 3<br> Final"
            }
        ]
    }
}

Description

KeyDescription
stagesList of objects with key name containing the name of each stage.
progressInteger within range 0 to 100 specifying the progress.
widthOptional. The width of the component. Only applies when inside a Section or Row component whose columns option is set to null.
titleOptional. Title to add above the progress bar.

Hybiscus will use the value of progress to automatically figure out which stages have been completed and show them as filled in circles in the diagram.

The colour of the progress bar is controlled by the theme chosen.

Width

For details on the width key, please see here.

Example

Missing something?

Hybiscus is continuously improving and adding new features. If you think we are missing a critical feature, please do not hesitate to contact us and offer your feedback at info@hybiscus.dev