fullpage.js - how to create progress bar for slides when autoplay is on

Question

I am using fullpage.js and have the basics setup ok. I am using the autoslide function

afterRender: function() {
  idInterval = setInterval(function() {
    $.fn.fullpage.moveSlideRight();
  }, 2000);

I would like to add a timer progress-bar when in the auto slideshow mode so the users know there is more.

I have a codepen and with fullpage example and a working code for the progressbar. https://codepen.io/anon/pen/OXWPje

any suggestion on how to incorporate a progress bar for each slide ?

thanks

Answer 1

so the best way I could figure this out is to use a external ccs animation to create a looped progress bar inside of the slide that matches the timer set in javascript.

something like https://codepen.io/anon/pen/aZpReg

I picked the loading code from https://codepen.io/sriramsitaraman/pen/zBNmgX

.anim9 {
    margin: 0 auto 2em auto;
  width: 600px;
  height: 2px;
  background: -webkit-linear-gradient(left, #f00, #f00 10%, #000 10%);
  background: linear-gradient(to right, #f00, #f00 10%, #000 10%);
  -webkit-animation: anim9 6s linear infinite;
          animation: anim9 6s linear infinite;
}
@-webkit-keyframes anim9 {
  to {
    background-position: 600px 0;
  }
}
@keyframes anim9 {
  to {
    background-position: 600px 0;
  }
}

thanks