zwei Farbiger balken langsam einblenden

[JesusFreak777]

hallo

ich möchte gerne einen balken haben der
erstens zweifarbig ist => vorne 00ff00; hinten 0000ff;

ich hab das schonmal online gesehen weiß aber nicht mehr wo,... die lösung war mit reinem quelltext und nicht mit einem bild

und
zweitens in menden div (breite 240px)
möchte ich den balken jetzt langsam einfaden,...
das heißt wenn der balken jetzt 180px groß ist, soll er bei 0px anfangen und soll dann langsam innerhalb von ca. 2 sekunden bei 180px angelangt ein,...

ist das realisierbar?

 

[serializable]

Faden: Den Balken zu 100% darstellen. Eine Fläche über den Balken legen, die die Hintergrundfarbe besitzt.

Der Balken ist dann nicht zu sehen. Nun nur die Position der Fläche nach rechts verschiben oder die Fläche verkleinern.

Dazu eine Funktion schreiben und diese dann alle 250 ms aufrufen:

setTimeout( "flaecheVerschieben();", 250 );


Fertig

 

[OnlyFoo]

<style>
    .farbe1 {
        background-color: #800;
    }
    .farbe2 {
        background-color: #080;
    }
</style>
<script>
    
    var current = 0;
    function setValue( frac ) {
        document.getElementById( "hinten" ).style.width = (frac * 100) + "%";
    }
    
    window.setInterval( function() {
            current = (current + 0.05) % 1;
            setValue( current );
        }, 50 );
    
</script>


<div id='vorne' class='farbe1' style='position: relative; width: 200px; height: 32px; overflow: hidden;'>
    
    <div id='hinten' class='farbe2' style='position: absolute; width: 0%; height: 100%;'></div>
</div>

das etwas modifzieren, dann sollte esgehen