Premium component

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

Key Description
stages List of objects with key name containing the name of each stage.
progress Integer within range 0 to 100 specifying the progress.
width Optional. The width of the component, when inside a Section or Row component with their columns option set to null.
title Optional. 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

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

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