0

Как показать линк после того, как загрузка достигнет конца?

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 ответа 2

1

Вот так

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>

1

Если я вас правильно понял то как то так.

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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.