Ladebalken [IE|M|O]

von: Werner Zenk

Ein animierter JavaScript-Ladebalken der für verschiedene
Aufgaben einsetzbar ist.

Inhalt dieser Seite:
» Ladebalken (einfach)
» Ladebalken mit autom. Weiterleitung zu einer anderen Seite
» Ladebalken mit Prozent-Anzeige

• Ladebalken (einfach)

Demo:

Start

Quelltext:

<script type="text/javascript">
// JavaScript-Ladebalken
var zaehler = 1;
function load(ziel) {
 if ( zaehler < ziel) {
  zaehler = zaehler + 1;
  document.getElementById("status").style.width = zaehler + "px";
  document.getElementById("counter").innerHTML = zaehler;
  window.setTimeout("load('" + ziel + "')", 25);
 }
 else {
  zaehler = 1;
 }
}
</script>

<span id="counter"></span> 
<img id="status" src="spacer.gif" width="10" height="10"
 style="background-color: #8080FF;">

<a href="javascript:load('300');">Start</a>

Länge des Ladebalkens
IDs (Jede ID darf nur einmal auf der Seite vorkommen!)
Pause (hoher Wert = lange Pause)
Hintergrundfarbe vom transparenten Bild (spacer.gif)

«- spacer.gif-Bild zum kopieren.

• Ladebalken mit autom. Weiterleitung zu einer anderen Seite

Demo: Demo starten

Quelltext:

<script type="text/javascript">
// JavaScript-Ladebalken mit Weiterleitung zu einer anderen Seite
var zaehler = 1;
function weiterleitung(ziel) {
 if ( zaehler < ziel) {
  zaehler = zaehler + 1;
  document.getElementById("status").style.width = zaehler + "px";
  document.getElementById("counter").innerHTML = zaehler;
  window.setTimeout("weiterleitung('" + ziel + "')", 10);
 }
 else {
  location.href="andere_seite.htm";
 }
}
</script>

<span id="counter"></span> 
<img id="status" src="spacer.gif" width="10" height="10"
 style="background-color: #FF8000;
  border: solid 1px #000000;">

<script type="text/javascript">
weiterleitung('450'); // Funktion starten
</script>

Name der Zielseite
Hintergrundfarbe vom transparenten Bild (spacer.gif)
Rahmenfarbe vom transparenten Bild

• Ladebalken mit Prozent-Anzeige

» Start

Quelltext:

<script type="text/javascript">
// JavaScript-Ladebalken mit Prozent-Anzeige
var zaehler = 1;
function load3(ziel) {
 if ( zaehler < ziel) {
  zaehler = zaehler + 1;
  document.getElementById("status3").style.width = zaehler + "px";
 var prozent = Math.round( zaehler/ziel * 100);
  document.getElementById("counter3").innerHTML = prozent+" %";
  window.setTimeout("load3('" + ziel + "')", 25);
 }
 else {
  zaehler = 1;
 }
}
</script>

<div
 style="position: relative;
  width:400px; background-color: #C0C0C0; border: solid 1px #000000;">
<span id="counter3"
 style="position: absolute;
  width: 100%; z-index: 3; text-align: center; font-weight: bold;">0%</span> 
<div id="status3"
 style="position: relative;
  background-color: #00FF00; width:0px; height: 22px;
  border-right: solid 1px #000000; z-index: 2;">&thinsp;</div>
</div>

<br>
&raquo; <a href="javascript:load3('400');">Start</a>

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Kommentare: 25 » aufmachen Javaboy: Ist ganz gut zu gebrauchen. Malin: das ist coollll hab ich schon lange gesucht! Chris: Sehr gut! Aber wird die Funktion load/weiterleitung dann nicht ständig aufgerufen, oder wird das Intervall auch noch gestoppt? Werner: Der Intervall wird gestoppt wenn `zaehler = ziel` ist. frostbeule: Ich habe mal eine Frage, ich hoffe mir kann jemand weiterhelfen.Meine Frage: Kann man die Textmeldung die erscheint bevor man auf die gewünschte Seite weitergeleitet wird irgendwie ausschalten so, dass man gleich auf die Seite weitergeleitet wird ohne, dass die Textmeldung erscheint?Ich bedanke mich schon einmal für eure Antworten. Danke Werner: Die Meldung ist nur im Demo vorhanden! Toasterfraktion: So machst du aus dem ersten Beispiel eine Anzeige mit Prozent: var prozent = Math.round( zaehler/ziel * 100); document.getElementById("counter").innerHTML = prozent+" %";Gruß,www.toasterfraktion.de Werner: Danke an Toasterfraktion sunadumari: Wie kann man den Wert (300) als php-Kode darstellen (aus einer DB z.B.?<a href="javascript:load('300');">Start</a>z.B.:<a href="javascript:load('$zeit');">Start</a>????Kann man es auch noch automatisch starten lassen, ohne den START-Knopf ? Werner: Nach dem Ladebalken folgendes einbauen: <script type="text/javascript"> load('300'); </script> Chris: ist zwar alles schön und nett nur um damit evtl prozessabläufe anzuzeigen wie z.b. uploads oder laufzeiten fehlt die die direkte kommunikation die man leider nicht wirklich umsetzen kann deswegen benutz ich hauptsählich loader.gif grafiken die ich beim absenden von request über ajax starte und nach erfolgreicher antwort wieder ausblende Werner: Eine Möglichkeit wäre: parent.iframename.location.href="download.zip"; Lars: Gibts die Möglichkeit mit Autostart? Werner: <body onLoad="load('300');"> Julian: Hallo,Vielen dank für diese gute Beschreibung Volker: Gibts ne andere Möglichkeit für den Automatischen start auser <body onLoad="load('300');"> ? Ich benötige das für eine Anwendnung wo ich kein Body Tag ändern darf. Werner: Schreibe einfach ein JavaScript in die Seite: <script type="text/javascript"> load('300'); </script> Henry: Hallo ich habe eine frage bezüglich parent.iframename.location.href="download.zip";wie muss ich das einbauen, denn ich habe null ahnung von javascript. Schonmal vielen dank im voraus Werner: Ersetze im zweiten JavaScript (Ladebalken mit Prozent-Anzeige) folgendes: location.href="andere_seite.htm"; durch: parent.iframename.location.href="download.zip" und im iFrame muss dann der Fenstername "iframename" stehen: <iframe name="iframename" width="300" height="300"></iframe> Henry: Danke für schnelle Antwort. Werde gleich mal probieren. Jannik: Hallo, Es kann sein das die Frage dumm ist aber darf ich das auf meine Homepage tuhen oder ist das verboten. Freue mich auf eine schnelle Antwort. Danke schonmal Werner: Ja das darfst du. Siehe dazu auch die » Nutzungsbedingungen Flo) www.floriansangl.de.: wie kann ich den balken so einstellen, dass er beim starten der seite losläuft, Wichtig: Nicht als Intro! direkt auf der seite Werner: Das Sript im Head-Bereich einbauen und mit <body onLoad="load3('400');"> die betreffende JavaScript-Funktion aufrufen. juhut: Top! Danke für den Tipp. Dein Ladebalken ist weitaus schöner und besser als meiner.
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!