This component requires a premimum subscription to be used. For more details, see Plans and pricing.

Progress bar

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

Schema

Below are two examples of the schema required to define an Image.

{
    "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

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

The width key supports defining the width using a fraction specified as a string e.g. 1/3. The values for the denominator supported are 2, 3, 4, 5, 6 and 12, whilst the numerator can be any value up to the value of the denominator.

If the width key is set to null, then the component will attempt to fill all the available horizontal space.

Example