nicht angemeldet
Hi,
hier mal ein Beispiel, wie man das für moderne Browser umsetzen könnte, ganz ohne Grafiken:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Progressbars</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#progressbar1 { width:500px; height:20px; padding:1px; border:1px solid #000; }
#progressbar1 span { background:red; display:inline-block; height:20px; }
#progressbar1, #progressbar1 span {-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
</style>
<script type="text/javascript">
/* <![CDATA[ */
var span, progress = 0;
window.onload = function() {
span = document.getElementById("progressbar1").firstChild;
document.onclick = function() {
progress += 10;
if(progress > 100) { progress = 0; }
span.style.width = progress+"%";
}
document.documentElement.title = "Klicken, um Progressbar vorwärts zu bewegen";
document.onclick();
}
/* ]]> */
</script>
</head>
<body>
<div id="progressbar1"><span></span></div>
</body>
</html>
Getestet in (halbwegs) aktuellen Firefox, Opera, Safari und Chrome, sowie IE9-Modus im IE-Tester.
Ebenfalls im IETester zumindest soweit „abwärts-kompatibel“ bis runter zum 5.5er, dass wenigstens der Balken und Fortschritt angezeigt werden, wenn auch nicht „hübsch rund“.
Wenn man nicht will, dass das bei 0% gar nichts anzeigt, kann man eine min-width für den Span angeben; oder den JavaScript-Teil, der den Prozentwert setzt, dafür sorgen lassen, dass der Bereich von Null bis 100% nicht über die komplette Breite umgesetzt, sondern eine Startbreite hinzugenommen wird.
Weitere Feinheiten, wie bspw. Umgang mit gebrochenden Prozentwerten und ggf. notwendige Rundung, insb. was den exakten Abschluss bei 100% angeht, bitte selber erarbeiten.
Und wenn jemandem wirklich das Herz blutet, weil veraltete Browser das nicht hübsch abgerundet, sondern eckig anzeigen - der kann dann immer noch ein paar Grafiken hinzunehmen, wenn er den Extra-Aufwand nicht scheut.
MfG ChrisB
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
Gunnar Bittersmann