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:#6ab04b;
	z-index:1;
}

#fields {
	width:auto;
	max-width:100%;
	display:table;
	margin:20px auto;
	padding:2px 2px 2px 16px;
	background:#fff;
	border-radius:8px;
}

#fields p {
	float:left;
	line-height:56px;
	padding:0 16px 0 0;
	font-size:20px;
	text-transform:uppercase;
	letter-spacing:1px;
	font-weight:700;
}

#fields #input {
	float:left;
	display:inline-block;
	padding:0 2px 0 0;
}

#fields input {
	float:left;
	height:56px;
	border-radius:8px;
	background:#fff;
	color:#99acbf;
	text-transform:uppercase;
	letter-spacing:1px;
	font-weight:700;
	padding:8px 24px;
	border:1px solid #99acbf;
	font-size:26px;
}

#fields #btn {
	float:left;
	height:56px;
	border-radius:8px;
	background:#99acbf;
	color:#fff;
	text-transform:uppercase;
	letter-spacing:1px;
	font-weight:700;
	cursor:pointer;
	padding:16px 24px;
}

Start Val

Start

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.

#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');		
	}
});

oliver Ich heisse Oli und komme aus dem wuseligen Berlin. Meine Leidenschaft für Webseiten hält seit mehr 10 Jahren an. Dabei ist es egal ob ich kleinere oder größere Projekte umsetze - ich hänge mich in jedes Projekt mit voller Leidenschaft rein und versuche mich dabei immer wieder neu zu entdecken und neue Ideen umzusetzen.

Hinterlasse ein Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.