If your process is running in the foreground (not the background), it blocks the UI. You have to run it in the background so your UI gets free to do something else (like updating your progressbar). Take a look at the BackgroundWorker class, it lets you do exactly that.

I have several reports that all merge onto the same datatable.  The user can click several to run and then hit the 'find records' button to run them all simultaneously.  Since they each take so long, I'd like to update the user on the status bar as each of these stored procedures is called successfully.  However, when I call the procedure, I only get one update at the very end listing everything.

What I'd like to do :



    'Initialize Progress Components
    repCompleted = 0
    ProgressBar1.Minimum = 0
    ProgressBar1.Maximum = repSel
    ProgressBar1.Value = repCompleted
    TextBlock2.Text = repCompleted & " of " & repSel & " reports finished"

Then as each report gets successfully run, update the `repCompleted` value and refresh

    repCompleted += 1
    TextBlock2.Text = repCompleted & " of " & repSel & " reports finished"
    ProgressBar1.Value = repCompleted

The problem is that these refreshes don't happen until I've exited the sub.  I'd like it to count forward as each one finishes i.e. `1 of 4 completed`, `2 of 4 completed`, etc.

Any ideas?

Refresh/Update text field and progress bar while running a sub in vb.net wpf application

The problem is that `.progress` class applies `overflow: hidden` so no child elements will ever be taller than the wrapper. And no elements outside of `.progress` can be positioned relative to the children. 

One way to solve this would be to remove the overflow rule on the `.progress` wrapper like this:



    .progress {
        overflow: visible;
    }

Then you have to manually apply the border radius to the `.progress-bar` since it is no longer confined by it's parent:



    .progress-bar {
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
                border-radius: 5px;
    }

Then you can add a circle at the end of the `.progress-bar` by adding an element with the `:after` pseudo class and adding a border radius equal to half of the element's width/height.



    .progress-bar:after {
        content:"";
        background-color: darkgreen;
        
        width: 30px;
        height: 30px;
        margin-right: -15px;
        margin-top: -5px;
        -webkit-border-radius: 15px; 
           -moz-border-radius: 15px; 
                border-radius: 15px;
        
        float: right;
    }

## [Demo in fiddle][fiddle]


Which will look like this:

[![screenshot][screenshot]][fiddle-show]

> **Warning**: `overflow:hidden` was there for a reason.  I'm not sure why, but this might have unintended consequences.

[fiddle]: http://jsfiddle.net/KyleMit/wD374/
[fiddle-show]: http://jsfiddle.net/KyleMit/wD374/show

[screenshot]: http://i.imgur.com/RagEtIN.png

I'd like to make a custom Bootstrap progress-tracker like this:

![example][1]

with pure HTML/CSS. This is what I have so far

HTML:

    <div class="progress progress-manager">   
        <div class="progress-bar progress-bar-done" role="progressbar" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100" style: "width:14%">
            <div id="circle"></div>
        </div>
    </div>

<br/>
CSS:

    #circle{
        color: blue;
        background-color: blue;
        width: 50px;
        height: 50px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        border-radius: 25px;
    }

Which spits out the following (notice the circle doesn't extend past the progress bar):

![won't display circle graphic properly][2]

Bootstrap doesn't have a `:before` pseudo element for its progress bar, so how might I achieve a result similar to the example?

  [1]: http://i.stack.imgur.com/RG5Zg.jpg
  [2]: http://i.stack.imgur.com/0l9c1.jpg

Adding a graphic to Bootstrap progress bar

If you don't care if how much less than 1% it is, how about using [`Math.max()`][1] to just start at one percent and then start making meaningful progress after that.

### Demo in Stack Snippets





    var $traveled = $("#traveledMiles"),
        $total = $("#totalMiles"),
        $progressBar = $('.progress-bar');

    $($traveled).add($total).keyup(function(){

      var percent = $traveled.val() / $total.val() * 100;

      // at least 1%
      percent = Math.max(percent,1);

      $progressBar
        .css('width', percent+'%')
        .attr('aria-valuenow', percent)
        .children(".sr-only").html(percent+'%'); 

    }).keyup();



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>


    <div class="form-group">
      <label for="traveledMiles">Traveled Miles</label>
      <input type="text" class="form-control" id="traveledMiles"
             placeholder="Enter Traveled Miles" value="5">
    </div>
    <div class="form-group">
      <label for="totalMiles">Total Miles</label>
      <input type="text" class="form-control" id="totalMiles" 
             placeholder="Enter Total Miles" value="23872">
    </div>

    <div class="progress">
      <div class="progress-bar" role="progressbar"  style="width: 60%;"
           aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only">60%</span>
      </div>
    </div>



Since you have a label, you could even follow [Bootstrap's suggestion][2]:

> To ensure that the label text remains legible even for low percentages, consider adding a min-width to the progress bar.

Like this:



    <div class="progress-bar" style="min-width: 2em;">






    var $traveled = $("#traveledMiles"),
        $total = $("#totalMiles"),
        $progressBar = $('.progress-bar');

    $($traveled).add($total).keyup(function(){

      var percent = $traveled.val() / $total.val() * 100;

      // at least 1%
      percent = Math.max(percent,1);
      
      // round off decimals
      percent = Math.round(percent);
      
      // max of 100%
      percent = Math.min(percent,100);

      $progressBar
        .css('width', percent+'%')
        .attr('aria-valuenow', percent)
        .html(percent+'%'); 

    }).keyup();



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>


    <div class="form-group">
      <label for="traveledMiles">Traveled Miles</label>
      <input type="text" class="form-control" id="traveledMiles"
             placeholder="Enter Traveled Miles" value="5">
    </div>
    <div class="form-group">
      <label for="totalMiles">Total Miles</label>
      <input type="text" class="form-control" id="totalMiles" 
             placeholder="Enter Total Miles" value="23872">
    </div>

    <div class="progress">
      <div class="progress-bar" role="progressbar"  style="min-width: 2em;width: 60%;"
           aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
        60%
      </div>
    </div>



[1]:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max
[2]: http://getbootstrap.com/components/#progress-label

I am using the bootstrap progress bar to show the percentage of miles covered by someone from a total of 23,872 miles.

For example if user A covered only 5 miles which means:

5/23872 = 0.00020945 * 100 = **0.02094504** miles.

Currently anything below 1% does not show up on the progress bar.

![enter image description here][1]

![enter image description here][2]

  [1]: http://i.stack.imgur.com/wMYXv.png
  [2]: http://i.stack.imgur.com/0bopV.png

Is it possible to be able to show the percentage of miles below 1 the bar so it lights up green just the 28% in the image above.

**Code for Conversion:**

    // Calculating Percentages for each region
    var ukPercent = $scope.ukTotal / 23872;
    var apacPercent = $scope.apacTotal / 23872;
    var naPercent = $scope.naTotal / 23872;
    
    $scope.ukPercentage = ukPercent * 100;
    $scope.naPercentage = naPercent * 100;
    $scope.apacPercentage = apacPercent * 100;

Showing less then 1% on the BootStrap progress bar

The javascript to update the HTML seems correct.  Here's a simple example which updates the progress bar using the code you provided:

### Demo in StackSnippets





    var eventStub = {total: 100, lengthComputable: true}

    for (i = 0; i <= eventStub.total; i++) {
      setTimeout(function() {
        eventStub.loaded = i
        updateProgressBar(eventStub)
      },1000);
    }

    function updateProgressBar(e) {
      if (e.lengthComputable) {
        var percentComplete = (e.loaded / e.total) * 100;
        console.log(percentComplete + '% uploaded');
        $('.progress-bar').css('width', percentComplete+'%')
                          .attr('aria-valuenow', percentComplete);
      }
    };



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//seiyria.github.io/bootstrap-slider/stylesheets/bootstrap-slider.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//seiyria.github.io/bootstrap-slider/javascripts/bootstrap-slider.js"></script>

    <div class="progress progress-striped active">
      <div class="progress-bar" role="progressbar" id="progress-bar-file" style="width: 0.000001%"  
           aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>



One thing that could be affecting your request is if the XHR listeners is attached after you've already called `open` or `send`.  Try setting up those listeners ahead of time.

### [Here's a Working Demo in Plunker][1]
<sup>(you can't POST calls to stacksnippets.net because of the Access-Control-Allow-Origin).</sup>



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
  
    <input type="file" id="fileInput" />
    <input type="button" value="Upload" id="uploadBtn" />
    <div class="progress progress-striped active">
      <div class="progress-bar" role="progressbar" id="progress-bar-file" style="width: 0.000001%"  
           aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>



    $(function() {
    
      $('#uploadBtn').click(function() {
        var file = document.getElementById("fileInput").files[0];
        var xhr = new XMLHttpRequest();
    
        // attach listeners before posting
        xhr.upload.onprogress = updateProgressBar;
        
        xhr.open('POST', './test.php', true);
        xhr.send(file);
    
      });
    
      function updateProgressBar(e) {
        if (e.lengthComputable) {
          var percentComplete = (e.loaded / e.total) * 100;
          console.log(percentComplete + '% uploaded', e);
          $('.progress-bar').css('width', percentComplete + '%')
                            .attr('aria-valuenow', percentComplete);
        }
      }
    
    })


---

**Further Reading**:

* [MDN - Using XMLHttpRequest][5]
* [xhr.upload.onprogress not working in FireFox][2]
* [XMLHttpRequest upload.onprogress instantly complete][3]
* [xhr.upload.onprogress doesnt work][4]

[1]: http://plnkr.co/edit/0zTIzJ3GVS0TuNHgt1PY
[2]: https://stackoverflow.com/q/21369556/1366033
[3]: https://stackoverflow.com/q/18310038/1366033
[4]: https://stackoverflow.com/q/14160308/1366033
[5]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

I'm trying to update a Bootstrap progress bar according to the percent uploaded of a file. 

I'm using the following code:



    xhr.upload.onprogress = function(e) {
      if (e.lengthComputable) {
        var percentComplete = (e.loaded / e.total) * 100;
        console.log(percentComplete + '% uploaded');
        $('.progress-bar').css('width', percentComplete+'%')
                          .attr('aria-valuenow', percentComplete);
      }
    };



    <div class="progress progress-striped active">
      <div class="progress-bar" role="progressbar" id="progress-bar-file" style="width: 0.000001%"  
           aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>


However it does not work. The progress bar doesn't load, although the rest of the actions do happen, including the console logging, the file loading, and arriving to the database.

Any ideas?