Balken wie eine Filmrolle abspielen
Hallo zusammen, ich möchte gerne mit der Zeit einen Balken(Hintergrund) ablaufen lassen, welcher erst grün ist dann ins Gelbe geht und wenn der Bereich ganz gelb ist, dann bewegt er sich ins Rote.
Also erst ist der Hintergrund ganz grün, mit der Zeit bewegt sich das grüne Feld nach links und am Ende des grünen Feldes ist er gelb. Und danach dasselbe mit dem gelben Feld und am Ende ist das Feld rot. Ich hoffe ich habe mich verständlich ausgedrückt.
Der hier verwendete Code
<script src="/js_webseite/jquery.js"></script>
<style>
body {
background-color:#ccc;
}
h1 {
text-align:center;
}
#ladebalken {
height:22px;
width:400px;
border:1px solid red;
margin:auto;
}
#fortschritt1 {
position:absolute;
z-index:3;
margin-top:-19px;
height:24px;
width:403px;
background:green;
border:none;
text-align:center;
}
#fortschritt2 {
position:absolute;
z-index:2;
margin-top:-19px;
height:24px;
width:402px;
background:orange;
border:none;
text-align:center;
}
#fortschritt3 {
position:absolute;
z-index:1;
margin-top:-18px;
height:22px;
width:401px;
background:red;
border:none;
text-align:center;
}
#prozente{
position:relative;
left:45%;
z-index:4;
text-align:center;
}
</style>
<body>
<h1>Lade einen Balken</h1>
<div id="ladebalken">
<span id="prozente">
</span>
<div id="fortschritt3"></div>
<div id="fortschritt2"></div>
<div id="fortschritt1"></div>
</div>
<p style="text-align: center">
</p>
<script>
var pixel = 400;
var b=1;
var sek=20;//in sekunden
var zeit=800/sek;
function ladeBalken() {
sek--;
console.log(b)
pixel= pixel-zeit;
if (pixel <= 0) {
$('#fortschritt'+b).css('width', pixel + "px");
b++;
pixel=400;
}else if (pixel > 0) {
$('#fortschritt'+b).css('width', pixel + "px");
}
if(b<=2){
$('#prozente').html(sek+'Sekunden')
var lade = window.setTimeout("ladeBalken()", 1000);
}else if(b>=3){
//window.clearTimeout(lade);
}
}
ladeBalken()
function ladenStoppen() {
window.clearTimeout(lade);
}
function weiterLaden() {
ladeBalken();
}
</script>
</body>