Custom Progress Bar Html and CSS layout

January 20, 2023

I’m trying to make a ‘custom’ progress bar with numbers at each end of the progress bar. Left hand number being the current value, and the right hand side being the max/target value. I’ve got it so that I’m showing the two numbers but I can’t seem to position the right hand number correctly.

What I’m trying to achieve is…

Trying to Achieve

and what I currently have is…

Currently Have

This is what I currently have code wise…

JSFiddle

.progress-outer {
  width: 96%;
  margin: 10px 2%;
  padding: 3px;
  text-align: center;
  background-color: #f4f4f4;
  border: 1px solid #dcdcdc;
  color: #fff;
  border-radius: 20px;
}

.progress-inner {
  min-width: 15%;
  white-space: nowrap;
  overflow: hidden;
  padding: 5px;
  border-radius: 20px;
  background-color: orange;
}

.progressBarCurrent {
  color: black;
  float: left;
}

.progressBarGoal {
  color: black;
  float: right;
}

<div class="progress-outer">
  <div class="progress-inner" style="width:27%;">
    <span class="progressBarCurrent">50g</span>
    <span class="progressBarGoal">180g</span>
  </div>
</div>

I’ve tried putting the the second span outside the the progress inner div but then moves the text outside the whole thing and I couldn’t work out how to move it into the correct place.

Can anyone help?

>Solution :

Instead of float:left you can use position:absolute

.progress-outer {
  width: 96%;
  margin: 10px 2%;
  padding: 3px;
  text-align: center;
  background-color: #f4f4f4;
  border: 1px solid #dcdcdc;
  color: #fff;
  border-radius: 20px;
    position: relative;
}

.progress-inner {
  min-width: 15%;
  white-space: nowrap;
  overflow: hidden;
  padding: 5px;
  border-radius: 20px;
  background-color: orange;

}

.progressBarCurrent {
  color: black;
  float: left;
}

.progressBarGoal {
  color: black;
  position: absolute;
  right: 5px;
}

<div class="progress-outer">
  <div class="progress-inner" style="width:27%;">
    <span class="progressBarCurrent">50g</span>
    <span class="progressBarGoal">180g</span>
  </div>
</div>