How to just... make bar for multiple elements? :/

[fares57]

Ok, I feel really stupid for asking this but...

I just wanna create a bar for many elements at once

Something like this is not working

var rankings = document.querySelectorAll('.rankinkgs-bar')

rankings.forEach(() => {
  let progressBar = new ProgressBar.Line(ranking,{
    strokeWidth: 8,
    color: '#36ff5e'
  });
})

I get that Uncaught ReferenceError: progressBar is not defined stuff.. :/

I just wanna make a bar through this loop, getting the ranking value from an HTML attribute. That's all. for (ranking of rankings) is not working either. I just can't loop this thing.

[fares57]

var ProgressBar = require('progressbar.js')

const rankings = document.querySelectorAll('.rankings-bar')
rankings.forEach(function(item) {
  item.innerHTML = 'hii'
  var progressBar = new ProgressBar.Line(item,{
    strokeWidth: 8,
    color: '#36ff5e'
  });
  
progressBar.animate(0.9, {
  duration: 1500,
  easing: 'easeInOut',
}, function() {
  console.log('Animation has finished');
});
  
})

I had just forgotten the .animate() outside the loop and things got messy. Sorry!