3

Circle CSS is not consistent as the number of digits is getting changed. If the value is one digit then the circle shape became egg shape.And shape is getting distorted when it is three digit number. 

.my-progress-value {
  background-color: deepskyblue;
  color: white;
  border-radius: 100%;
  font-size: 7pt;
  padding: 8px 5px 8px 5px;
  position: absolute;
  margin-top: -11px;
}
.my-progress-container {
  width: 200px;
  padding-top: 4px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.my-progress {
  background-color: deepskyblue;
  width: 60%;
  height: 8px;
  text-align: right;
}
<div class="col-md-3" id="1">
  <div class="my-progress-container">
    <div class="my-progress">
      <span class="my-progress-value">0</span>
    </div>
  </div>
</div>
<div class="col-md-3" id="2">
  <div class="my-progress-container">
    <div class="my-progress">
      <span class="my-progress-value">49</span>
    </div>
  </div>
</div>
<div class="col-md-3" id="3">
  <div class="my-progress-container">
    <div class="my-progress">
      <span class="my-progress-value">100</span>
    </div>
  </div>
</div>

Here is Fiddle

web-tiki
  • 99,765
  • 32
  • 217
  • 249
BKM
  • 136
  • 1
  • 13

2 Answers2

5

Set same height and width in .my-progress-value class.

 .my-progress-value {
        background-color: deepskyblue;
        color: white;
        border-radius: 100%;
        font-size: 7pt;
        padding: 8px 5px 8px 5px;
        position: absolute;
        margin-top: -11px;
        width:50px; //add this
        height:50px;  //add this
    }
Chonchol Mahmud
  • 2,717
  • 7
  • 39
  • 72
1

you need to add fix width to achieve your purpose as it's computing width is auto currently try width: 30px; on "my-progress-value" class I hope this will solve your problem

check link http://jsfiddle.net/e8fqLdfy/3/

ganesh satpute
  • 391
  • 2
  • 10