Extra Progress Bar Haml and CSS

Progress.Haml

//this is the haml structure—make sure you replace COUNTER VARIABLE with the actual variable.

#progress.gray
  #progress-outer
    #progress-inner{style: "height: 100%; width: #{ (5) + ((COUNTER VARIABLE / 200) * 95) }% ;"}
      .count= COUNTER VARIABLE
    .goalcount="2,000"

Progress_Stylesheet.css

//matching CSS, to go at the bottom of the current css file. You can re-namespace and recolor as you see fit, just make sure that .gray class matches the haml.


.gray #progress-inner, .gray #progress-inner::before, .gray #progress-inner::after{
background:#333;
}

.gray .goalcount {
color:#333;
}