Ladebalken

Verfasst von Alice am 20.02.2012 - wurde schon 26154 mal gelesen

Kategorie: JavaScript

Bewertung:

7x bewertet

Schwierigkeit: einfach
Kommentare: [ 3 ]

Tag - Schlagwort JavaScript Ladebalken CSS

Ladebalken - Tutorial

Und wieder mal ein Tutorial-Wunsch, der in Erfuellung geht ...

einen Ladebalken der nach
Ablauf einer bestimmten Zeit 100% erreicht. Zum Beispiel ich habe den Eintrag in der DB: 'bis' in der Spalte 'bis' steht ein $timestamp.
Also ich rechne $bis - $time und erhalte so die restliche Zeit. Aber wie kriege ich das jetzt in einen Ladebalken verpackt ?

Beispiel ansehen

Step 1 - Div-Elemente = Ladebalken

Wir benoetigen folgende Div Elemente:

<div class="laden">
	<div id="balken"><div id="prozent"></div></div>
</div>

DIV id=balken ist unser Ladebalken
DIV id=prozent ist fuer die Prozentanzeige zustaendig

Step 2 - Javascript Funktion zaehle();

<script type="text/javascript">

var sekunden = '12'; // Zeit wie lange der Balken laufe soll in SEKUNDEN

function zaehle() {

    if (p < 99.9) {
        p = p + 0.1;
        document.getElementById('balken').style.width = p.toFixed(1) + "%";
        document.getElementById('prozent').innerHTML = p.toFixed(1) + "%";
    } else {
        window.clearInterval(intervalZaehle);
    }
}

var p = 0;
var intervalZaehle = window.setInterval('zaehle()', sekunden );

</script>

Als erstes folgt die Angabe der Sekunden, wie lange der Balken braucht um 100% erreicht zu haben.
Anschliessend eine simple Funktion mit der Bezeichnung zaehle, welche ein Div-Element verbreitert solange der Balken laden soll

var intervalZaehle = window.setInterval('zaehle()', sekunden ); Startet den Ladebalken beim betreten der Seite ...

Jetzt sollte man den Div Elementen per CSS noch eine feste Groesse zuweisen und dem Prozent DIV eine Hintergrundfarbe verpassen und schon laed unser Ladebalken

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Alice Grafixx - Ladebalken</title>

<style>
.laden{
	width: 350px; /* Laenge des Balkens */
	hight: 20px;  /* Hoehe des Balkens */
	border: 1px solid black;
}

#balken{
	width: 250px; /* Laenge des Balkens */
	hight: 20px;  /* Hoehe des Balkens */
	border-right: 1px solid black;
	background: #11A2A2 /* Balkenfarbe */
}

#prozent{
	width: 350px;
	text-align: center;
	color: black;
	font: normal 1.0em;
}

</style>
</head>

<body>

<script type="text/javascript">

var sekunden = '12'; // Zeit wie lange der Balken laufe soll in SEKUNDEN

function zaehle() {

    if (p < 99.9) {
        p = p + 0.1;
        document.getElementById('balken').style.width = p.toFixed(1) + "%";
        document.getElementById('prozent').innerHTML = p.toFixed(1) + "%";
    } else {
        window.clearInterval(intervalZaehle);
    }
}

var p = 0;
var intervalZaehle = window.setInterval('zaehle()', sekunden );

</script>

<div class="laden">
	<div id="balken"><div id="prozent"></div></div>
</div>

</body>

</html>

Das war dann auch schon der ganze Spuck mit dem Ladebalken ;)

Kommentar schreibenHinterlasse einen Kommentar

Du musst angemeldet sein, um einen Kommentar zu hinterlassen...

Du bist noch kein Mitglied von Alice-Grafixx.de?
Dann kannst du dich hier kostenlos registrieren ...