fullpage.js - wie man Fortschrittsbalken für Folien erstellt, wenn Autoplay aktiviert ist

Question

Ich benutze Fullpage.js und habe die Grundlagen Setup ok. Ich bin mit der Autoslide Funktion

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

Ich mag einen Timer Fortschrittsbalken, wenn sie im Auto Diashow-Modus hinzufügen, damit die Benutzer wissen, dass es mehr.

Ich habe einen Codepen und mit Fullpage Beispiel und einen Arbeitscode für die Fortschrittsleiste. https://codepen.io/anon/pen/OXWPje

ein Vorschlag, wie Sie eine Fortschrittsanzeige für jede Folie einfügen?

dank

Answer 1

so der beste Weg, ich könnte diese Zahl aus ist eine externe ccs Animation zu verwenden, um einen geschlungenen Fortschrittsbalken im Innern des Schiebers zu erstellen, die den Timer in Javascript gesetzt einstimmt.

so etwas wie https://codepen.io/anon/pen/aZpReg

ich den Code zum Laden von 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; 
    } 
} 

dank

gepflückt