Animated progressbar list Counter only count last aria-valuenow

Question

I'm currently doing my own online resume. I wanted to put several animated progress-bar for the skills section. I also integrated a counter to display the animation of the count percentage for each progress-bar, which is located in another div above each corresponding div class="progress-bar".

The problem is when I try to set the text() for the counter in the div above progress-bar, it shows the counted value from the last progress bar's "aria-valuenow" attribute.

$(".progress-bar").each(function(i) {
  $(this).animate({
    width: $(this).attr('aria-valuenow') + '%'
  });

  $(this).prop('Counter', 0).animate({
    Counter: $(this).attr('aria-valuenow')
  }, {
    duration: 3000,
    step: function(now) {
      $(".progressbar-number").text(Math.ceil(now));
    }
  });
});

.pt-4 {
  padding-top: 1.5rem !important;
}

.progress_elements {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.progress_elements>div {
  flex: 0 0 100%;
  max-width: 100%;
  padding-bottom: 1rem !important;
}

.title-wrap {
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

.progressbar-title {
  color: #000;
  font-size: 1rem;
}

.progressbar-title p {
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}

.progress_value {
  position: relative;
  color: #000;
  font-size: 1rem;
}

.progressbar-number {
  display: inline-block;
}

.progress {
  width: 100%;
  height: 5px;
  border-radius: 0;
}

.progress-bar {
  height: 5px;
  background-color: #2ecc71;
  -webkit-transition: width 5s ease;
  -moz-transition: width 5s ease;
  -o-transition: width 5s ease;
  transition: width 5s ease;
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="progress1">
  <div class="title-wrap">
    <div class="progressbar-title">
      <p>
        PHP & MYSQL
      </p>
    </div>
    <div class="progress_value">
      <div class="progressbar-number"></div>
      <span>%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-1" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

<div class="progress2">
  <div class="title-wrap">
    <div class="progressbar-title">
      <p>
        HTML5 & CSS3
      </p>
    </div>
    <div class="progress_value">
      <div class="progressbar-number"></div>
      <span>%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-2" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

<div class="progress3">
  <div class="title-wrap">
    <div class="progressbar-title">
      <p>
        WORDPRESS
      </p>
    </div>
    <div class="progress_value">
      <div class="progressbar-number"></div>
      <span>%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-3" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

What is your question? What is the expected outcome of your code? Please add specifics. — Lord Elrond, Mar 07 '19 at 03:52
I'm sorry @Jane, I forgot to specify the solution wanted, I wanted to display the animation counter on each progress-bar. — Gori Amir, Mar 07 '19 at 14:09

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

One solution is to add a common class to the main div holding the progress bar (in the next example it is called progress-wrapper). Now, after this, you need to use next code to update the % text value:

step: function(now)
{
  $(this).closest(".progress-wrapper")
      .find(".progressbar-number")
      .text(Math.ceil(now));
}

The previous code, for each progress bar, found his wrapper and then uses find() to get the related .progressbar-number div to update. The difference with your code is that the next logic:

$(".progressbar-number").text(Math.ceil(now));

was updating the text of all the divs with class .progressbar-number.

Updated Example:

$(".progress-bar").each(function(i)
{
  $(this).animate({
    width: $(this).attr('aria-valuenow') + '%'
  });

  $(this).prop('Counter', 0).animate({
    Counter: $(this).attr('aria-valuenow')
  }, {
    duration: 3000,
    step: function(now)
    {
      $(this).closest(".progress-wrapper")
          .find(".progressbar-number")
          .text(Math.ceil(now));
    }
  });
});

.pt-4 {
  padding-top: 1.5rem !important;
}

.progress_elements {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.progress_elements>div {
  flex: 0 0 100%;
  max-width: 100%;
  padding-bottom: 1rem !important;
}

.title-wrap {
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

.progressbar-title {
  color: #000;
  font-size: 1rem;
}

.progressbar-title p {
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}

.progress_value {
  position: relative;
  color: #000;
  font-size: 1rem;
}

.progressbar-number {
  display: inline-block;
}

.progress {
  width: 100%;
  height: 5px;
  border-radius: 0;
}

.progress-bar {
  height: 5px;
  background-color: #2ecc71;
  -webkit-transition: width 5s ease;
  -moz-transition: width 5s ease;
  -o-transition: width 5s ease;
  transition: width 5s ease;
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="progress-wrapper">
  <div class="title-wrap">
    <div class="progressbar-title">
      <p>
        PHP & MYSQL
      </p>
    </div>
    <div class="progress_value">
      <div class="progressbar-number"></div>
      <span>%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-1" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

<div class="progress-wrapper">
  <div class="title-wrap">
    <div class="progressbar-title">
      <p>
        HTML5 & CSS3
      </p>
    </div>
    <div class="progress_value">
      <div class="progressbar-number"></div>
      <span>%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-2" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

<div class="progress-wrapper">
  <div class="title-wrap">
    <div class="progressbar-title">
      <p>
        WORDPRESS
      </p>
    </div>
    <div class="progress_value">
      <div class="progressbar-number"></div>
      <span>%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-3" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

Thank you @Shidersz for solution. So basically I just forgot to mention the parent div in the script right? — Gori Amir, Mar 07 '19 at 14:11
Basically, you forgot to get the relative `.progressbar-number` to each progress bar when updating the values. So, what I have done is found the relative wrapper to each progress bar first, and then find the relative `.progressbar-number` inside that wrapper. — Shidersz, Mar 07 '19 at 15:07

Animated progressbar list Counter only count last aria-valuenow

1 Answers1

Updated Example: