This documentation refers to a Gravstrap obsolete release. Please consider to upgrade to the new release

The Gravstrap Progress bar component handles the Bootstrap Progress bar component.

The progressbar component is defined by the following Yaml code:

gravstrap:
    progressbar:        
        # Add as many pageheader as you need
        progressbar1:
            min: 0
            max: 100
            value: 60
            show_label: true
            type: primary | success / info / warning / danger
            striped: true
            animated: true

This code must be added to the page where you need to display the component.

min property

The min mandatory property defines the progress bar min value.

value property

The value mandatory property defines the progress bar actual value.

max property

The max mandatory property defines the progress bar max value.

show_label property

The show_label mandatory property shows the actual value on the progress bar, when true.

type property

The type mandatory property defines the alert type. You can choose one from the following accepted values: primary, danger, success, info, warning. Primary is the default value for this component.

striped property

The striped mandatory property shows a striped progress bar.

animated property

The animated mandatory property animates the progress bar. It works only when the striped option is activated

Render the progressbar component

Add the following code to the template where you need to render the progressbar component:

{{ gravstrap.progressbar1 }}

Next Post Previous Post