css progress bar indicator

html markup

<div class="progress-bar--container">
  <div class="{!(v.projectCompletionPercentage == 0) ? 'progress-bar--bar progress-bar--zerowidthbar' : 'progress-bar--bar'}" style="{!'width: '+v.projectCompletionPercentage+'%'}">
    <span class="progress-bar--pct-complete-label">{!v.projectCompletionPercentage+'%'}</span>
  </div>
</div>

style.css

.THIS .progress-bar--container{
  width: 100%;
  border-radius:4px;
  height:20px;
  background-color:#cfd5df;
}

.THIS .progress-bar--bar{
  background-color: #44a2b8;
  border-radius:4px;
  height:20px;
  text-align:center;
}

.THIS .progress-bar--zerowidthbar{
  background-color: transparent !important;
  width: 100% !important;
}

.THIS .progress-bar--pct-complete-label{
  color:white;
}