Javascript-форум - НЕ работает Анимация

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - НЕ работает Анимация (https://javascript.ru/forum/misc/61055-ne-rabotaet-animaciya.html)

НЕ работает Анимация

не понимаю как сделать чтобы проценты тоже считались от 0 до 80

<div id="progressbar" value="80">
    <div class="progress"></div>
    <div class="progress-label"></div>
</div>

$(function(){

var progressBar = $('#progressbar').attr('value');
var progressLabel = $('.progress-label');
// проценты

//  анимация прогресса
$('.progress').animate({
  opacity: 1,
  width: progressBar + '%'
}, 30000).animate(10000, function() {
  $('#progressbar').find(progressLabel).text(progressBar + '%');
});
});

progressbar animate

Artem_A,

<!DOCTYPE HTML><html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .progress{
      height: 15px;
      background-color: #FF0000;
      width: 0;
    }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
 $(function() {
    var progressBar = $("#progressbar"),
        val = progressBar.data("value"),
        progressLabel = $(".progress-label", progressBar);
    $(".progress").animate({
        width: val + "%"
    }, {
        step: function(a, b) {
            b.prop == "width" && progressLabel.text((a|0) + "%")
        },
        duration: 30000
    })
});
  </script>
</head>

<body>
<div id="progressbar" data-value="80">
    <div class="progress"></div>
    <div class="progress-label"></div>
</div>

</body>

</html>