The Gravstrap Progress bar shortcode handles the Bootstrap Progress bar component. Here is a live example:

80% Complete

The collapse shortcode, shown above, is defined by the following definition:

[g-progressbar label="Php" type="success" value="80" min="0" max="100"][/g-progressbar]

Shortcode parameters

The [bootstrap-progressbar] shortcode has some optional parameters:

  • name - defines an unique component name.
  • label - defines the progressbar label
  • type - defines the progress bar type and could be one of the following values: primary|success|info|warning|danger.
  • striped - displays a striped progress bar.
  • animated - animates a striped progress bar.
  • value - the progress bar displayed value.
  • min - the progress bar min value.
  • max - the progress bar max value.
  • attributes - defines extra attributes you can add to your shortcode. Attributes is a string of HTML key:value tokens, separated by commas. A valid attributes value is attributes=class:myclass, rel:my-rel".

Render the progressbar component using the template

The progressbar component can also be dynamically filled with data provided by a json file or fetched from a database. You will provide an array similar to the following one:

$progressbar = array(
    'name' => 'progressbar1',
    'label' => 'image1.jpg',
    'type' => 'success',
    //'striped' => true,
    //'animated' => true,
    'value' => 80,
    'min' => 0,
    'max' => 100,
    'attributes' => 'class:my-class,rel:my-rel',

$this->grav['twig']->twig_vars['progressbar'] = $progressbar;

then in your template you will render the progressbar as follows:

{% include 'bootstrap/progressbar.html.twig' with progressbar %}

Next Post Previous Post