Progress

Star
The Trowel project is abandonned. Trowel core and the Trowel components are no more maintained or supported. More infos

Download

You can fetch Trowel Progress with npm, yarn or bower.

# With bower
$ bower install --save trowel-progress

# With npm
$ npm install --save trowel-progress

# With yarn
$ yarn add trowel-progress

You can also download a zip archive right here.

Installation

Scss

The main scss file to include to your main .scss file is located at the ./src/scss/progress.scss. As a Trowel Component, it also requires two dependencies to compile the scss code. Here an scss installation snippet.

// Trowel core (need to be imported first)
@import './path/to/dependencies/trowel-core/src/trowel';

// Trowel Progress
@import './path/to/dependencies/trowel-progress/src/scss/progress';

Twig template

The twig template ready to be include or embed is located at ./src/twig/progres.html.twig.

Usage

<div class="progress">
  <div class="progress__bar" style="width: 25%" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

If you want to add the progress value into the bar, just add the value into the .progress__bar element.

33%
<div class="progress progress--primary">
  <div class="progress__bar" style="width: 33%" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100">33%</div>
</div>

Themes

By default, you have access to 4 themes :

<div class="progress progress--primary">
  <div class="progress__bar" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress progress--success">
  <div class="progress__bar" style="width: 40%" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress progress--warning">
  <div class="progress__bar" style="width: 60%" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress progress--danger">
  <div class="progress__bar" style="width: 80%" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Sizes

By default, you have access to 4 sizes :

<div class="progress progress--xs">
  <div class="progress__bar" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress progress--sm">
  <div class="progress__bar" style="width: 40%" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress">
  <div class="progress__bar" style="width: 60%" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress progress--lg">
  <div class="progress__bar" style="width: 80%" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Twig usage

Instead of writing html, you can include the twig template :

{% include "path/to/trowel-progress/src/twig/progress.html.twig" with {
  "min": 0,
  "max": 100,
  "now": 25,
} %}

To add a label into the bar transform the include as an embed and overwrite the label block :

{% embed "path/to/trowel-progress/src/twig/progress.html.twig" with {
  "min": 0,
  "max": 100,
  "now": 25,
} %}
  {% block label %}25%{% endblock %}
{% endembed %}

If you want to add some modifiers on the block selector (.progress) in order to, for example, use a specific theme or size, you can set the array modifiers with as many modifiers as you need :

{% include "path/to/trowel-progress/src/twig/progress.html.twig" with {
  "modifiers": ["lg", "success"],
  "min": 0,
  "max": 100,
  "now": 25,
} %}

Sass reference

Syntax variables

You can override the global syntax config for a specific component with the following variables

VARIABLE DEFAULT VALUE DESCRIPTION
$progress--syntax null syntax config for .progress

Component variables

VARIABLE DEFAULT VALUE DESCRIPTION
$progress--font-size (
  'default': 1rem,
  '-xs': 0.65rem,
  '-sm': 0.8rem,
  '-lg': 1.2rem,
)		 sets the font-size property
$progress--font-family null sets the font-family property
$progress--font-weight null sets the font-weight property
$progress--text-transform null sets the text-transform property
$progress--letter-spacing null sets the letter-spacing property
$progress--text-decoration null sets the text-decoration property
$progress--margin 0 0 1em sets the margin property
$progress--border-width null sets the border-width property
$progress--border-style null sets the border-style property
$progress--border-color null sets the border-color property
$progress--border-radius 0.25em sets the border-radius property
$progress--box-shadow null sets the box-shadow property
$progress--background-color rgb(232, 232, 236) sets the background-color property
$progress--height (
  '-xs': 0.5em,
  '-sm': 0.75em,
  'default': 1em,
  '-lg': 1.5em,
)		 sets the height property
$progress--padding 0 1.65em sets the padding property
$progress--line-height 1.2 sets the line-height property
$progress--color rgb(255, 255, 255) sets the color property
Bar    
VARIABLE DEFAULT VALUE DESCRIPTION
$progress-bar--background-color (
  'default': rgb(31, 13, 51),
  '-primary': rgb(31, 13, 51),
  '-success': rgb(55, 211, 189),
  '-warning': rgb(255, 176, 0),
  '-danger': rgb(253, 65, 100),
)		 sets the background-color property for .progress__bar
$progress-bar--padding 0.65em 1.65em sets the padding property for .progress__bar
$progress-bar--font-size 0.8em sets the font-size property for .progress__bar
$progress-bar--justify-content flex-end sets the justify-content property for .progress__bar
$progress-bar--align-items center sets the align-items property for .progress__bar