CODEWITHSUNDEEP
javascriptjqueryjquery-uiprogress-bar
AAM111
AAM111

Reputation: 1239

How to dynamically set progress bar value in jQuery?

On my tutorial website, I'm using jQuery UI progress bars not as bars that will change, but as images to display to show the user how far they are through the tutorial. Example:

$(document).ready(function() {
  $(.progressbar).progressbar({
    value: 50
  });
});
<link rel="stylesheet" type="text/css" href="CSS/jQueryUI.css">
<script type="text/javascript" src="JS/jQuery.js"></script>
<script type="text/javascript" src="JS/jQueryUI.js"></script>
<script type="text/javascript" src="JS/index.js"></script>

<body>
  Lots of stuff here
  <div class="progressbar"></div>
  <span style="text-align: center">50% complete</span>
  Lots more stuff here
</body>

However, what I want it to do is have multiple progress bars with different values. I want to have a class for the progress bars, and a custom attribute for its value. Something like this:

$(document).ready(function() {
  $(.progressbar).progressbar({
    value: $(.progressbar).attr("data-progress-value");
  });
});
<link rel="stylesheet" type="text/css" href="CSS/jQueryUI.css">
<script type="text/javascript" src="JS/jQuery.js"></script>
<script type="text/javascript" src="JS/jQueryUI.js"></script>
<script type="text/javascript" src="JS/index.js"></script>

<body>
  Lots of stuff here
  <div class="progressbar" data-progress-value="33"></div>
  <span style="text-align: center">33% complete</span> Lots more stuff here
  <div class="progressbar" data-progress-value="67"></div>
  <span style="text-align: center">67% complete</span> More stuff here
  <div class="progressbar" data-progress-value="90"></div>
  <span style="text-align: center">90% complete</span>
</body>

I know this code won't work though, because the jQuery docs say .attr and all similar functions only get the attribute of the first of the set.

Is something like this possible in jQuery?

Or, for the XY problem showing here, If this is not possible, how can I dynamically set static progress bars?

Thank you in advance.

Upvotes: 3

Views: 9706

Answers (3)

Leif
Leif

Reputation: 11

Old post ik but this is what is working for me:

  • NOTE: progress tag is defined since html 5
  • NOTE2: You can smooth out the "animation" by tweaking the delay times.

let progress = 0;
let timeoutSec = 10;
/**
 * This will update indefinetly and will run "yourRepeatetUpdate()" func every "10" sec
 * Time progress is displayed every update in <progress id="progressTillUpdate" ...></progress> html elem
 */
setInterval(
    (function () {
        console.log("Progress: " + progress + "/" + timeoutSec)
        document.getElementById("progressTillUpdate").max = timeoutSec;
        document.getElementById("progressTillUpdate").value = progress; // Does not update for some reason

        if (progress == timeoutSec) {yourRepeatetUpdate()}
        progress = (progress < timeoutSec) ? progress + 1 : 0; // Loop after timeoutSec 
}), 1*1000); // Updates every second

async function yourRepeatetUpdate() {
  /*code*/
};
<style>
progress {
   animation-duration: 1s;
}
</style>


<progress id="progressTillUpdate" value="0" max="100" style="width: 100%;height:20px;"> 
  Progress bar 
</progress>

Upvotes: 1

charlietfl
charlietfl

Reputation: 171679

Fairly simple in an each() where you have access to each element instance before initializing plugin for that element.

$(function() {
  $('.progressbar').each(function() {
    var $el = $(this);
    $el.progressbar({
      value: $el.data("progress-value")
    });
  });
})
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>


Lots of stuff here
<div class="progressbar" data-progress-value="33"></div>
<span style="text-align: center">33% complete</span> Lots more stuff here
<div class="progressbar" data-progress-value="67"></div>
<span style="text-align: center">67% complete</span> More stuff here
<div class="progressbar" data-progress-value="90"></div>
<span style="text-align: center">90% complete</span>

Upvotes: 3

Sam
Sam

Reputation: 444

You could add an additional class unique to each progress bar, like pb1, pb2 etc.

Then just 

$(document).ready(function() {
  $(.pb1).progressbar({
    value: 75
  });
$(.pb2).progressbar({
    value: 50
  });
});

Upvotes: 0

Related Questions