How to clear ProgressBar without using effect?

Navigation
5

I'm making a lot of imports, and when I upload a new file I need to zero the progress, so I can set the width to 0px , but it will reset with an effect I would not want to use.

Example: 

var progressBar = $(".progress-bar");

var acionaProgresso = setInterval(addProgress, 1000);

function addProgress() {
  var width = progressBar.width() + 40;
  progressBar.width(width);
}

$("#zeraProgressBar").click(function() {
  progressBar.width('0%');
  clearInterval(acionaProgresso);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <br>
  <h4 class="text-center">Importando arquivos</h4>
  <div class="container">
    <div class="progress">
      <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only"></span>
      </div>
    </div>
  </div>
  <div class="text-center">
    <br>
    <br>
    <button class="btn btn-primary" id="zeraProgressBar">
      Zerar Progress Bar
    </button>
  </div>

</div>

How can I clear progress without using this effect?

    
asked by anonymous 22.01.2016 / 19:45

1 answer

4

This happens because of the% css effect , if you remove it it will remove the progress at once!

Add to your zeraProgressBar: 

progressBar.css('-webkit-transition', 'none').css('transition', 'none');

Example working on jsfiddle

    
22.01.2016 / 19:57
Android vs. Web Sync How to avoid repetition in LINQ queries?