コピペ用の進捗バー

css

.progressbar {
  width: 100%;
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
  .progress {
    background-color: #5cb85c;
    height: 20px;
    &-0 {
      width: 0%;
    }
    &-20 {
      width: 20%;
    }
    &-40 {
      width: 40%;
    }
    &-60 {
      width: 60%;
    }
    &-80 {
      width: 80%;
    }
    &-100 {
      width: 100%;
    }
  }
}

html

<div class="progressbar">
  <div class="progress progress-0">

<div class="progressbar">
  <div class="progress progress-20">

<div class="progressbar">
  <div class="progress progress-40">

<div class="progressbar">
  <div class="progress progress-60">

<!-- (略) -- >

イメージ