Javascript fullpage.js-启用自动播放时如何创建幻灯片进度条

我使用的是fullpage.js，基本设置正常。我正在使用自动滑动功能

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

我想添加一个计时器进度条时，在自动幻灯片模式，让用户知道有更多

我有一个代码笔和一个完整的例子，还有一个progressbar的工作代码

对如何为每张幻灯片添加进度条有何建议

---

谢谢

，所以我能弄明白这一点的最好方法是使用外部ccs动画在幻灯片内部创建一个与javascript中设置的计时器匹配的循环进度条

差不多

我从中选择了加载代码

谢谢

.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;
  }
}