Ein etwas anderer Prozessbalken.
Der läuft 3-mal durch mit 3 verschiedene Farben.
Code
<html>
<head>
<style>
body {
background-color:#ccc;
}
h1 {
text-align:center;
}
#ladebalken {
height:22px;
width:400px;
border:1px solid red;
margin:auto;
}
#fortschritt {
height:22px;
width:1px;
background-color:red;
border:none;
text-align:center;
}
</style>
</head>
</html>
<body>
<h1>Lade einen Balken</h1>
<div id="ladebalken">
<div id="fortschritt"><span id="prozente">
</span></div>
</div>
<p style="text-align: center">
<input type="button" onclick="ladenStoppen()" value=" Stoppen ">
<input type="button" onclick="weiterLaden()" value=" Weiter Laden ">
</p>
<script>
var pixel = 1;
function ladeBalken() {
pixel++;
var ele=document.getElementById('fortschritt');
if (pixel <= 400) {
if(pixel <= 160){
ele.style.backgroundColor='red';
}else if(pixel <= 320){
ele.style.backgroundColor='orange';
}else if(pixel <= 400){
ele.style.backgroundColor='green';
}
var prozenta=pixel/4;
prozent=prozenta.toFixed(2);
document.getElementById('prozente').innerHTML=prozent+'%';
lade = window.setTimeout("ladeBalken()", 90);
ele.style.width=pixel + "px";
}
}
ladeBalken()
function ladenStoppen() {
window.clearTimeout(lade);
}
function weiterLaden() {
ladeBalken();
}
</script>