Progressbar CSS – jQuery
Eine Prozessleiste oder eine sogenannte Progressbar mit CSS und jQuery zu erstellen ist gar nicht so schwierig. Wir brauchen dazu nur ein bisschen jQuery ein kleines HTML Gerüst und ein bisschen CSS und schon haben wir eine Progressbar. Wie genau, das erkläre ich im folgenden kurzen Tutorial und ist in meiner Demo.
- HTML
- JS
- CSS
Start Val
Start
jQuery('div#btn').on('click',function() {
var inputStart = jQuery('#number').val();
if ( jQuery.isNumeric( inputStart ) ) {
var interval = setInterval(function() {
if (inputStart > 100) {
clearInterval(interval);
} else if (inputStart == 100) {
jQuery("#count").html('Finished');
jQuery("#bar").css( 'width',inputStart + '%' );
jQuery("#btn").html('Restart');
} else {
jQuery("#count").html( inputStart + '%');
jQuery("#bar").css( 'width',inputStart + '%' );
}
inputStart++;
}, 50);
} else {
jQuery("#count").html('Warning Message');
}
});#wrapper {
width: 100%;
padding: 24px;
}
#progressbar {
width:100%;
height:56px;
position:relative;
border-radius:8px;
background:#fff;
overflow:hidden;
}
#count {
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
padding:0 16px;
line-height:56px;
z-index:9;
color: #fff;
text-transform:uppercase;
letter-spacing:1px;
font-weight:700;
}
#bar {
width:0;
height:56px;
position:absolute;
left:0;
top:0;
background:#5dd39e;
z-index:1;
}
#fields {
width:auto;
max-width:100%;
display:table;
margin:24px auto;
}
#fields p {
float:left;
line-height:56px;
padding:0 16px 0 0;
font-size:20px;
}
#fields #input {
float:left;
display:inline-block;
padding:0 2px 0 0;
}
#fields input {
float:left;
height:56px;
}
#fields #btn {
float:left;
height:56px;
border-radius:4px;
background:#0f333f;
color:#fff;
text-transform:uppercase;
letter-spacing:1px;
font-weight:700;
cursor:pointer;
padding:16px 24px;
}Start Val
Keine Produkte gefunden.
HTM Gerüst erstellen
Zunächst brauchen wir ein Html Gerüst.
Mit CSS schön machen
Als nächstes brauchen wir ein bisschen CSS, um die Progressbar ein bisschen aufzuhübschen.
Keine Produkte gefunden.
#progressbar {
width:100%;
height:56px;
position:relative;
border-radius:8px;
background:#fff;
overflow:hidden;
}
#count {
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
padding:0 16px;
line-height:56px;
z-index:9;
color: #fff;
text-transform:uppercase;
letter-spacing:1px;
font-weight:700;
}
#bar {
width:0;
height:56px;
position:absolute;
left:0;
top:0;
background:#6ab04b;
z-index:1;
}Progressbar mit jQuery animieren
Als erste brauchen wir einen Anfangswert, von wo der Fortschrittsbalken beginnen soll. In den meisten Fällen bei 0. Aber es gibt manchmal Fälle, da möchte man bei einer anderen zahl zwischen 0 und 100 beginnen.
Lest daher den Anfangswert entweder aus dem Input Field
var inputStart = jQuery('#number').val();oder aus dem data-start Feld vom div mit der ID Count
var inputStart = jQuery('#count').attr('data-start');Nun habt Ihr den Ausgangswert. Nun könnt Ihr mittels click auf einen Button die Animation starten oder Ihr lasst Sie automatisch nach dem Laden der Seite beginnen oder via Ajax. Da gibt es hunderte Möglichkeiten. Ich starte die Fortschrittsbalken Animation einfach mit einem Klick auf den Button. Dabei lese ich den Wert aus dem Value vom input-Field aus.
var inputStart = jQuery('#number').val();Als nächstes frage ich ab, ob der Wert auch numerisch ist. Ist dies nicht der Fall, so gebe ich ein Error aus. Ansonsten mache ich weiter mit der Progressbar Animation.
jQuery('div#btn').on('click',function() {
var inputStart = jQuery('#count').attr('data-start');
if ( jQuery.isNumeric( inputStart ) ) {
// Ist eine Zahl
} else {
// Ist keine Zahl
}
});Nun nutze ich die Funktion setInterval, die mir alle 50ms ( 1000 = 1s) den Ausgangswert um eins nach oben zählt (inputStart++). Nun muss ich nur noch den neuen Wert abfragen. Und so sieht meine Abfrage aus:
- if (inputStart > 100) {: Ist der Ausgangswert größer als 100 beende ich mit clearInterval(interval); die Funktion.
- else if (inputStart == 100) {: Ist der Ausgangswert genau 100 schreibe ich anstelle der Prozentzahl das Wort „Finished“ und ändere den Text des Buttons von „Start“ auf „Restart“
- else {: Ist der Wert weiterhin kleiner gleich 100 schreibe gebe die Zahl als Count wieder und bewege den Fortschrittsbalken indem ich die Weite des Balkens mittels inline-css ändere.
var interval = setInterval(function() {
if (inputStart > 100) {
clearInterval(interval);
} else if (inputStart == 100) {
jQuery("#count").html('Finished');
jQuery("#bar").css( 'width',inputStart + '%' );
jQuery("#btn").html('Restart');
} else {
jQuery("#count").html( inputStart + '%');
jQuery("#bar").css( 'width',inputStart + '%' );
}
inputStart++;
}, 50);Und so sieht der ganze Spass dann komplett aus:
jQuery('div#btn').on('click',function() {
var inputStart = jQuery('#count').attr('data-start');
if ( jQuery.isNumeric( inputStart ) ) {
var interval = setInterval(function() {
if (inputStart > 100) {
clearInterval(interval);
} else if (inputStart == 100) {
jQuery("#count").html('Finished');
jQuery("#bar").css( 'width',inputStart + '%' );
jQuery("#btn").html('Restart');
} else {
jQuery("#count").html( inputStart + '%');
jQuery("#bar").css( 'width',inputStart + '%' );
}
inputStart++;
}, 50);
} else {
jQuery("#count").html('Warning Message');
}
});Keine Produkte gefunden.
Hallo, ich suche einen Progress Bar Code zum Lesen von Büchern.
Dabei möchte ich keine Prozentangabe, sondern eine Seitenangabe.
Sprich, wenn 576 Seiten (100%) sind, und ich gerade 110 Seiten gelesen habe, müsste mein Progressbar bei 19% stehen.
Aber wie kann ich es als Seitenfortschritt anzeigen lassen, also 110 von 576 Seiten.
Ich brauch doch dann einen neuen Wert für die 576 Seiten, oder?
Hey RoXXie SiXX,
Ich würde das über den ganz normalen Dreisatz ausrechnen. Sprich beim Laden der Seite ermittelst du die maximale Seitenanzahl (576) und speicherst diese in einer variablen. In einer anderen variablen speicherst du die aktuelle Seite (110).
576 Seiten – 100%
110 Seite – X%
-> 110 x 100 / 576 = 19,07%
Die Zahl rundest du dann auf oder ab und dann gibst du den Wert aus und schreibst „Super, schon 19% geschafft. Weiter so!“
Und mittels CSS und HTML erstellst Du ein Div in einem Div. Positionierst das innere Div absolut und gibst ihm eine Weite von 19%.
Hoffe konnte helfen oder Anregungen geben.
Lg Oli
Vielen herzlichen Dank für den Beitrag!
Konnte ich hervorragend als Basis verwenden.
Hey Bernd,
dass freut mich sehr.
LG Oli