fullpage.js - как создать индикатор выполнения для слайдов при включенном автовоспроизведении

Question

Я использую fullpage.js и поддерживаю настройку bask. Я использую функцию autoslide

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

Я хотел бы добавить таймер прогресс-бар, когда в автоматическом режиме слайд-шоу, так что пользователи знают, что есть больше.

У меня есть код и пример с полной ссылкой и рабочий код для панели прогресса. https://codepen.io/anon/pen/OXWPje

любое предложение о том, как включить индикатор выполнения для каждого слайда?

благодаря

Answer 1

поэтому лучший способ я мог понять это, чтобы использовать внешний c¯cs анимацию для создания зацикленного индикатора внутри ползуна, который соответствует таймеру, установленному в JavaScript.

что-то вроде https://codepen.io/anon/pen/aZpReg

я взял код загрузки из 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; 
    } 
} 

благодаря