Q:

Text Center on Progress Bar

I am trying to place the percentage total in the center of the colored progress bar but am struggling to do so.
I have tried placing the <p> tag within the different <div> tags but can't quite work it out.
Can anyone help?

// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
  moveProgressBar();
});

// SIGNATURE PROGRESS
function moveProgressBar() {
  console.log("moveProgressBar");
  var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
  var getProgressWrapWidth = $('.progress-wrap').width();
  var progressTotal = getPercent * getProgressWrapWidth;
  var animationLength = 1000;

  // on page load, animate percentage bar to data percentage length
  // .stop() used to prevent animation queueing
  $('.progress-bar').stop().animate({
    left: progressTotal
  }, animationLength);
}
.progress-size {
  width: 100%;
  height: 50px;
}

.progress-wrap {
  border: 1px solid #FFFFFF;
  background: #3498DB;
  height: 50px;
  margin: 0px 0;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  background: #ddd;
  left: 0;
  position: absolute;
  top: 0;
}

.progress-value {
  vertical-align: middle;
  line-height: 50px;
  padding-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrap" data-progress-percent="25">
  <div class="progress-bar progress-size"></div>
</div>
<p class="progress-value progress-size alt text-center">25%</p>

A:

You can just position the text absolutely inside the bar and then set the right to 100 minus the percentage:

// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
  moveProgressBar();
});

// SIGNATURE PROGRESS
function moveProgressBar() {
  console.log("moveProgressBar");
  var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
  var getProgressWrapWidth = $('.progress-wrap').width();
  var progressTotal = getPercent * getProgressWrapWidth;
  var animationLength = 1000;

  // on page load, animate percentage bar to data percentage length
  // .stop() used to prevent animation queueing
  $('.progress-bar').stop().animate({
    left: progressTotal
  }, animationLength);
  
  $('.progress-value').stop().animate({
    right: 100 - $('.progress-wrap').data('progress-percent') + '%'
  }, animationLength);
}
.progress-size {
  width: 100%;
  height: 50px;
}

.progress-wrap {
  border: 1px solid #FFFFFF;
  background: #3498DB;
  height: 50px;
  margin: 0px 0;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  background: #ddd;
  left: 0;
  position: absolute;
  top: 0;
}

.progress-value {
  line-height: 50px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 100%;
  text-align:center;
  margin:0;
  overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrap" data-progress-percent="25">
  <div class="progress-bar progress-size"></div>
  <p class="progress-value alt text-center">25%</p>
</div>

