Hide loading check indicator after 100%
I want to hide the progress bar after the animation is complete (100%). How should I do it? Here is the code that works, but I just don't know how to hide it:
$(".progress-bar").animate({
width: "100%"
}, 5000);
.progress.active .progress-bar {
-webkit-transition: none !important;
transition: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-12 progress-container">
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" style="width:0%">Loading...</div>
</div>
</div>
And there is also a Fiddle to show it (my code is based on this, what this fiddle does is load from 0 to 70% in 2.5 seconds, but it's exactly the same as I do: http: // jsfiddle.net/WEYKL/1/
+3
source to share
1 answer
You can use a function complete
from jQueryanimate
:
$(".progress-bar").animate({
width: "100%"
}, 5000, function() {
$(this).closest('.progress').fadeOut();
});
+6
source to share