# Animierter Ladebalken mit Prozentangabe



## xxxmike (18. November 2009)

Hallo,
hab hier schon alles soweit durchsucht, aber so richtig bin ich leider nicht fündig geworden.

Ich möchte folgendes Realisieren.


Es soll beim öffnen einer Seite ein Ladebalken anfangen sich zu füllen will ich mal so sagen. Die Zeiten sind unterschiedlich, von sagen wir mal 30 Sekunden bis zum Beispiel 70 Sekunden.

Also so eine Art Counter, nur das hier nicht die Sekunden herunter gezählt werden sollen, sondern eben ein Ladebalken sich füllt.
Wenn möglich noch mit % Anzeige.

Ich danke schon mal für jeden Tipp und Hilfe


----------



## Quaese (19. November 2009)

Hi,

ich habe hier für das Canvas-Element eine Fortschrittsanzeige vorgestellt. Vielleicht ist das etwas für dich.

Ciao
Quaese


----------



## xxxmike (19. November 2009)

Das ist schon ein cooles Teil. Da ich leider nicht so fit mit Java ect. bin, wie mache ich das, dass die Fortschrittsanzeige los läuft ohne einen Button zu klicken. Dass heißt wenn die Seite aufgerufen wird.

DANKE schon mal


----------



## Quaese (19. November 2009)

Hi,

du kannst die Anzeige im *onload*-Event des Dokuments starten.

Beispiel:

```
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<script src="excanvas.js" type="text/javascript"></script>
<script src="qpCanvasProgressBar.js" type="text/javascript"></script>

<script type="text/javascript">
  <!--
window.onload = function(){
  objCanvas = new qpCanvas({
    id: 'canvas_id',
    width: 100,
    height: 100,
    segments: 20,
    segspace: 0.15,
    bgFull: '#258',
    bgMid: '#368',
    bgFullShow: 1,
    bgMidShow: 1,
    center: false,
    onComplete: function(){
    	// this ist verfügbar
    	alert("Fertig !");
    }
  });

  // Startet die Fortschrittsanzeige mit nachstehenden Parametern:
  // Dauer: 5 Sekunden, 20 Schritte, Aussenradius 30 Pixel, Innenradius 25 Pixel
  objCanvas.drawCircleByTimeAndSteps(5, 20, 30, 25);
};
 //-->
</script>
</head>
<body>
<canvas id="canvas_id"></canvas>
</body>
</html>
```
 
Weitere Informationen findest du auf der verlinkten Seite in meinem ersten Post.

Ciao
Quaese


----------

