Progress bar

<progress max="100" value="50"></progress>

<div class="ch-progress">
  <div class="ch-progress__bar" style="width: 33%;"></div>
</div>

<div class="ch-progress">
  <div class="ch-progress__bar" style="width: 66%;"></div>
</div>

<div class="ch-progress">
  <div class="ch-progress__bar" style="width: 100%;"></div>
</div>

---

Sectioned progress bar

Use modifier classes to split the progress bar out into defined sections. It’s up to you to make sure the percentages work out for correctly filled sections!

<div class="ch-progress ch-progress--2-step">
  <div class="ch-progress__bar" style="width: 100%;"></div>
</div>

<div class="ch-progress ch-progress--3-step">
  <div class="ch-progress__bar" style="width: 100%;"></div>
</div>

...

<div class="ch-progress ch-progress--10-step">
  <div class="ch-progress__bar" style="width: 100%;"></div>
</div>

---

Stepper

Shows the user the name of the current step along with a percentage showing how far they are in the process.

<div class="ch-stepper">
  <div class="ch-stepper__header">
    <strong>Stay in touch</strong>
    <span class="ch-stepper__percentage"><strong>65%</strong> complete</span>
  </div>
  <div class="ch-progress">
    <div class="ch-progress__bar" style="width: 65%;"></div>
  </div>
</div>

Wrapped the stepper in a container but want it to stretch full-width on mobile? You can overwrite the container with negative margins: ch-progress ch-mh--n2 sm:ch-mh--0.

---

Add ch-stepper--complete to the outer wrapper to show the finished state. The percentage is replaced with a green tick.

<div class="ch-stepper ch-stepper--complete">
  <div class="ch-stepper__header">
    <strong>Complete</strong>
    <span class="ch-stepper__percentage"><strong>100%</strong> complete</span>
  </div>
  <div class="ch-progress ch-progress--3-step">
    <div class="ch-progress__bar" style="width: 100%;"></div>
  </div>
</div>

---