CODEWITHSUNDEEP
javascriptcssposition
John Higgins
John Higgins

Reputation: 907

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>

Upvotes: 2

Views: 431

Answers (3)

user9710380
user9710380

Reputation:

Please check, hope this will helpful form you https://codepen.io/Thakur92411/pen/aRoEoa1

<div class="progress-wrap" data-progress-percent="25">
  <div class="valuetext">25%</div>
  <div class="progress-bar progress-value progress-size"></div>
</div>

Upvotes: 0

andreas
andreas

Reputation: 16936

You don't need positioning here. Simply put your .progress-value element into the wrapper and use the padding-left attribute to animate the percentage value as well. To center the value, you can i.e. use an offset and half of your total progress value: (progressTotal-15)/2

Here is the working example:

// 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({
    paddingLeft: (progressTotal-15)/2
  }, 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 {
  padding-left: 10px;
}
<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 progress-size alt text-center">25%</p>
</div>

Upvotes: 0

Pete
Pete

Reputation: 58452

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>

Upvotes: 2

Related Questions