.progress{
  position: relative;
  margin: 4px;
  float:left;
  text-align: center;
}
.barOverflow{ /* Wraps the rotating .bar */
  position: relative;
  overflow: hidden; /* Comment this line to understand the trick */
  width: 180px; height: 90px; /* Half circle (overflow) */
  margin-bottom: -14px; /* bring the numbers up */
}
.bar{
  position: absolute;
  top: 0; left: 0;
  width: 180px; height: 180px; /* full circle! */
  border-radius: 50%;
  box-sizing: border-box;
  border: 10px solid #ccc;     /* half gray, */
  border-bottom-color: #008;  /* half green */
  border-right-color: #008;
}


.redbarOverflow{ /* Wraps the rotating .bar */
  position: relative;
  overflow: hidden; /* Comment this line to understand the trick */
  width: 180px; height: 90px; /* Half circle (overflow) */
  margin-bottom: -14px; /* bring the numbers up */
}

.redbar{
  position: absolute;
  top: 0; left: 0;
  width: 180px; height: 180px; /* full circle! */
  border-radius: 50%;
  box-sizing: border-box;
  border: 10px solid #ccc;     /* half gray, */
  border-bottom-color: #f33;  /* half rose */
  border-right-color: #f33;
}


//   border-bottom-color: #0bf;  /* half azure */
//     border-right-color: #0bf

//  border-bottom-color: #f33;  /* half rose */
//  border-right-color: #f33;