How to show a link after the download reaches the end?

var bar = $('.progress-bar'); var p = $('.progress-bar-text'); var width = bar.attr('style'); console.log(width); width = width.replace("width:", ""); width = width.substr(0, width.length - 1); var interval; var start = 0; var end = parseInt(width); var current = start; var countUp = function() { current++; p.html(current + "%"); if (current === end) { clearInterval(interval); } }; interval = setInterval(countUp, (1000 / (end + 1))); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="question quest-loader quest-hiden" id="progress-bar"> <div class="progres__bar"> <span class="progress-bar" style="width:100%"></span> <p class="progress-bar-text"></p> </div> <a href="#" class="question__btn" id="btn-12">Show result</a> </div>

    2 answers 2

    Like this

     var bar = $('.progress-bar'); var p = $('.progress-bar-text'); var width = bar.attr('style'); width = width.replace("width:", ""); width = width.substr(0, width.length-1); var interval; var start = 0; var end = parseInt(width); var current = start; var countUp = function() { current++; p.html(current + "%"); if (current === end) { clearInterval(interval); $('.question__btn').show(); } }; interval = setInterval(countUp, (1000 / (end + 1))); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="question quest-loader quest-hiden" id="progress-bar"> <div class="progres__bar"> <span class="progress-bar" style="width:100%"></span> <p class="progress-bar-text"></p> </div> <a href="#" class="question__btn" style="display:none" id="btn-12">Show result</a> </div>

      If I understand you correctly then something like this.

       var bar = $('.progress-bar'); var p = $('.progress-bar-text'); var width = bar.attr('style'); console.log(width); width = width.replace("width:", ""); width = width.substr(0, width.length - 1); var interval; var start = 0; var end = parseInt(width); var current = start; var countUp = function() { current++; p.html(current + "%"); if (current === end) { clearInterval(interval); $(".question__btn").show(); // показываем вашу ссылку } }; interval = setInterval(countUp, (1000 / (end + 1))); 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="question quest-loader quest-hiden" id="progress-bar"> <div class="progres__bar"> <span class="progress-bar" style="width:100%"></span> <p class="progress-bar-text"></p> </div> <a href="#" style="display:none" class="question__btn" id="btn-12">Show result</a> <!-- А тут как раз таки прячем--> </div>