Как анимировать индикатор загрузки только при прокрутке с помощью javascript / jquery?

Question

Я хочу анимировать индикатор выполнения начальной загрузки при прокрутке (также каждый раз, когда вы прокручиваете, анимация должна перезапускаться). Я искал решения по stackru, но когда я их применяю, ничего не работает, поэтому индикатор выполнения по-прежнему "двигается" не при прокрутке, а при загрузке страницы. Я хотел бы просто сделать это с js/jquery и ключевыми кадрами и без какой-либо библиотеки. Если у кого-то есть совет, это было бы здорово. Спасибо!

https://jsfiddle.net/hdxv4hrp/

код: html:

<div class="spacer"></div>
<div style="width: 400px; margin: 50px auto">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 60%">
            <span class="title">60%</span>
        </div>
    </div>
</div>

<div style="width: 400px; margin: 50px auto">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 10%">
            <span class="title">20%</span>
        </div>
    </div>
</div>
<div style="width: 400px; margin: 50px auto">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 90%">
            <span class="title">90%</span>
        </div>
    </div>
</div>

CSS:

.progress-bar {
    width: 0;
    animation: progress 1.5s ease-in-out forwards;
    .title {
        opacity: 0;
        animation: show 0.35s forwards ease-in-out 0.5s;
    }
}
@keyframes progress {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}
@keyframes show {
    from {
        opacity: 0;
    }

ЯШ:

$(window).scroll(function() {
    if ($(window).scrollTop() > 0) {
        progress-bar.addClass("show");
    } else {
        progress-bar.removeClass("show");
    }
});

Answer 1

Смотри ниже, я думаю, что это то, что вы хотите, я добавил несколько css свойства, чтобы держать индикатор выполнения в верхней фиксированной позиции, чтобы вы могли отслеживать прогресс и проверять, работает ли он правильно

$(document).ready(function() {
  $(document).scroll(function(event) {
    var topPos = $(this).scrollTop() + 100;
    var windowHeight = $(this).height();
    var docHeight = $(document).height();

    if (topPos >= $('#progress-1').position().top) {
      $('#progress-1 >.progress-bar').css({
          'max-width': '100%'
        })
        .attr('aria-valuenow', 100)
        .find('span.title').text('100%');
    } else if (topPos < $('#progress-1').position().top) {
      $('#progress-1 >.progress-bar').css({
          'max-width': '0%'
        })
        .attr('aria-valuenow', 0)
        .find('span.title').text('0%');
    }


    if (topPos >= $('#progress-2').position().top) {
      $('#progress-2 > .progress-bar').css({
          'max-width': '100%'
        })
        .attr('aria-valuenow', 100)
        .find('span.title').text('100%');
    } else {
      $('#progress-2 > .progress-bar').css({
          'max-width': '0%'
        })
        .attr('aria-valuenow', 0)
        .find('span.title').text('0%');
    }


    if (topPos >= $('#progress-3').position().top) {
      $('#progress-3 > .progress-bar').css({
          'max-width': '100%'
        })
        .attr('aria-valuenow', 100)
        .find('span.title').text('100%');
    } else {
      $('#progress-3 > .progress-bar').css({
          'max-width': '0%'
        })
        .attr('aria-valuenow', 0)
        .find('span.title').text('0%');
    }
  });
})

.title {
  color: #000;
}

.image {
  background-image: url(http://unsplash.imgix.net/44/lSed5VXIQnOw7PMfB9ht_IMG_1642.jpg?fit=crop&fm=jpg&h=660&q=75&w=1050);
  height: 400px;
}

.progress-bar {
  width: 0;
  animation: progress 1.5s ease-in-out forwards;
  .title {
    opacity: 0;
    animation: show 0.35s forwards ease-in-out 0.5s;
  }
}

@keyframes progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<div class="spacer"></div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div style="width: 400px; margin: 50px auto">
  <div class="progress" id="progress-1">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 0%">
      <span class="title">0%</span>
    </div>
  </div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<div style="width: 400px; margin: 50px auto">
  <div class="progress" id="progress-2">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 0%">
      <span class="title">0%</span>
    </div>
  </div>
</div>
<br /><br /><br /><br /><br /><br />
<div style="width: 400px; margin: 50px auto">
  <div class="progress" id="progress-3">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 0%">
      <span class="title">0%</span>
    </div>
  </div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/><br /><br /><br /><br /><br />