Progress

Default 

<div class="u-padBottomMd">
  <div class="ProgressBar ProgressBar--xlarge">
    <div class="ProgressBar-status" style="width: 25%;"></div>
  </div>
</div>

<div class="u-padBottomMd">
  <div class="ProgressBar ProgressBar--large">
    <div class="ProgressBar-status" style="width: 35%;"></div>
  </div>
</div>

<div class="u-padBottomMd">
  <div class="ProgressBar">
    <div class="ProgressBar-status" style="width: 45%;"></div>
  </div>
</div>

<div class="u-padBottomMd">
  <div class="ProgressBar ProgressBar--small">
    <div class="ProgressBar-status" style="width: 55%;"></div>
  </div>
</div>

<div class="u-padBottomMd">
  <div class="ProgressBar ProgressBar--xsmall">
    <div class="ProgressBar-status" style="width: 65%;"></div>
  </div>
</div>

Vertical 

<div class="Grid Grid--withGutter" style="height: 200px;">
  <div class="Grid-cell u-sizeFit">

    <div class="ProgressBar ProgressBar--vertical ProgressBar--xsmall">
      <div class="ProgressBar-status" style="height: 25%;"></div>
    </div>

  </div>
  <div class="Grid-cell u-sizeFit">

    <div class="ProgressBar ProgressBar--vertical ProgressBar--small">
      <div class="ProgressBar-status" style="height: 35%;"></div>
    </div>

  </div>
  <div class="Grid-cell u-sizeFit">

    <div class="ProgressBar ProgressBar--vertical">
      <div class="ProgressBar-status" style="height: 45%;"></div>
    </div>

  </div>
  <div class="Grid-cell u-sizeFit">

    <div class="ProgressBar ProgressBar--vertical ProgressBar--large">
      <div class="ProgressBar-status" style="height: 55%;"></div>
    </div>

  </div>
  <div class="Grid-cell u-sizeFill">

    <div class="ProgressBar ProgressBar--vertical ProgressBar--xlarge">
      <div class="ProgressBar-status" style="height: 65%;"></div>
    </div>

  </div>
</div>

Precise 

<div class="Grid Grid--withGutter" style="height: 200px;">
  <div class="Grid-cell u-sizeFit">

    <div class="ProgressBar ProgressBar--vertical ProgressBar--precise ProgressBar--xlarge">
      <div class="ProgressBar-status" style="height: 65%;"></div>
    </div>

  </div>
  <div class="Grid-cell u-sizeFill">

    <div class="ProgressBar ProgressBar--precise ProgressBar--xlarge">
      <div class="ProgressBar-status" style="width: 65%;"></div>
    </div>

  </div>
</div>

Progress Bar Colors 

<div class="Grid Grid--withGutter" style="height: 200px;">
  <div class="Grid-cell u-sizeFit">

    <div class="ProgressBar ProgressBar--vertical ProgressBar--neutral">
      <div class="ProgressBar-status" style="height: 25%;"></div>
    </div>

  </div>
  <div class="Grid-cell u-sizeFit">

    <div class="ProgressBar ProgressBar--vertical ProgressBar--negative">
      <div class="ProgressBar-status" style="height: 50%;"></div>
    </div>

  </div>
  <div class="Grid-cell u-sizeFit">

    <div class="ProgressBar ProgressBar--vertical">
      <div class="ProgressBar-status" style="height: 75%;"></div>
    </div>

  </div>
  <div class="Grid-cell u-sizeFit">

    <div class="ProgressBar ProgressBar--vertical ProgressBar--highlight">
      <div class="ProgressBar-status" style="height: 100%;"></div>
    </div>

  </div>
  <div class="Grid-cell u-sizeFill">

    <div class="u-padBottomMd">
      <div class="ProgressBar ProgressBar--neutral">
        <div class="ProgressBar-status" style="width: 25%;"></div>
      </div>
    </div>

    <div class="u-padBottomMd">
      <div class="ProgressBar ProgressBar--negative">
        <div class="ProgressBar-status" style="width: 50%;"></div>
      </div>
    </div>

    <div class="u-padBottomMd">
      <div class="ProgressBar">
        <div class="ProgressBar-status" style="width: 75%;"></div>
      </div>
    </div>

    <div class="u-padBottomMd">
      <div class="ProgressBar ProgressBar--highlight">
        <div class="ProgressBar-status" style="width: 100%;"></div>
      </div>
    </div>

  </div>
</div>

Radial 

<div class="Grid Grid--withGutter">
  <div class="Grid-cell u-sizeFit">

    <div class="RadialProgress RadialProgress--xsmall" data-progress="15">
      <div class="RadialProgress-circle">
        <div class="RadialProgress-status"></div>
        <div class="RadialProgress-status"></div>
      </div>
    </div>

  </div>
  <div class="Grid-cell u-sizeFit">

    <div class="RadialProgress RadialProgress--small" data-progress="30">
      <div class="RadialProgress-circle">
        <div class="RadialProgress-status"></div>
        <div class="RadialProgress-status"></div>
      </div>
    </div>

  </div>
  <div class="Grid-cell u-sizeFit">

    <div class="RadialProgress" data-progress="45">
      <div class="RadialProgress-circle">
        <div class="RadialProgress-status"></div>
        <div class="RadialProgress-status"></div>
      </div>
    </div>

  </div>
  <div class="Grid-cell u-sizeFit">

    <div class="RadialProgress RadialProgress--large" data-progress="60">
      <div class="RadialProgress-circle">
        <div class="RadialProgress-status"></div>
        <div class="RadialProgress-status"></div>
      </div>
    </div>

  </div>
  <div class="Grid-cell u-sizeFit">

    <div class="RadialProgress RadialProgress--xlarge" data-progress="75">
      <div class="RadialProgress-circle">
        <div class="RadialProgress-status"></div>
        <div class="RadialProgress-status"></div>
      </div>
    </div>

  </div>
</div>

Radial Colors 

<div class="Grid Grid--withGutter">
  <div class="Grid-cell u-sizeFit">

    <div class="RadialProgress RadialProgress--small RadialProgress--neutral" data-progress="45">
      <div class="RadialProgress-circle">
        <div class="RadialProgress-status"></div>
        <div class="RadialProgress-status"></div>
      </div>
    </div>

  </div>
  <div class="Grid-cell u-sizeFit">

    <div class="RadialProgress RadialProgress--negative" data-progress="60">
      <div class="RadialProgress-circle">
        <div class="RadialProgress-status"></div>
        <div class="RadialProgress-status"></div>
      </div>
    </div>

  </div>
  <div class="Grid-cell u-sizeFit">

    <div class="RadialProgress RadialProgress--large" data-progress="75">
      <div class="RadialProgress-circle">
        <div class="RadialProgress-status"></div>
        <div class="RadialProgress-status"></div>
      </div>
    </div>

  </div>
  <div class="Grid-cell u-sizeFit">

    <div class="RadialProgress RadialProgress--xlarge RadialProgress--highlight" data-progress="100">
      <div class="RadialProgress-circle">
        <div class="RadialProgress-status"></div>
        <div class="RadialProgress-status"></div>
      </div>
    </div>

  </div>
</div>