Progress bar

Progres bar component pack for Seed

Install

npm install seed-progress-bar --save

Dependencies

Example

The width of the progress bar is set with inline styles (style). Be sure to include role and aria-value for accessibility.

<div class="c-progress-bar">
  <div class="c-progress-bar__bar" role="progressbar" aria-value="30" style="width: 30%;"></div>
</div>

Sizes

All of the following sizes support responsive modifiers.

Extra small

<div class="c-progress-bar c-progress-bar--xs">
  <div class="c-progress-bar__bar" role="progressbar" aria-value="30" style="width: 30%;"></div>
</div>

Small

<div class="c-progress-bar c-progress-bar--sm">
  <div class="c-progress-bar__bar" role="progressbar" aria-value="30" style="width: 30%;"></div>
</div>

Medium

<div class="c-progress-bar c-progress-bar--md">
  <div class="c-progress-bar__bar" role="progressbar" aria-value="30" style="width: 30%;"></div>
</div>

Large

<div class="c-progress-bar c-progress-bar--lg">
  <div class="c-progress-bar__bar" role="progressbar" aria-value="30" style="width: 30%;"></div>
</div>

Configurations

Below are the default Sass configuration variables for seed-progress-bar. The variables can be found in the pack’s _config.scss file.

seed-progress-bar/_config.scss
// Namespaces
$seed-progress-bar-namespace: c-progress-bar !default;
$seed-progress-bar-bar-namespace: #{$seed-progress-bar-namespace}__bar !default;


// Configs
$seed-progress-bar-background-color: #E3E8EB !default;
$seed-progress-bar-border-radius: 3px !default;
$seed-progress-bar-color: #3197D6 !default;
$seed-progress-bar-height: 16px !default;
$seed-progress-bar-transition: width 0.5s ease;

$seed-progress-bar-sizes: (
  lg: 24px,
  md: 16px,
  sm: 8px,
  xs: 4px
) !default;

↑Back to top

Help Scout Developers