Skala mit Farbverlauf

Hallo zusammen,

könnte mir jemand dabei helfen eine Skala mit einem Farbverlauf (grün – orange – rot) von links nach rechts anzufertigen?
Wenn man die Seite öffnet soll sich über der Skala ( links nach rechts) ein Pfeil auf eine definierte Position bewegen, als Markierung. (siehe Anhang)
Ist das so überhaupt möglich?


Vielen Dank für die Unterstützung

Ist es mit dieser Methode auch möglich wenn ich meine Skala von 0 - 200 erstelle und der "Pfeil" sich auf genau 115 bewegen soll, unabhängig von der Bildschirmauflösung/Fenstergröße?

Vielen Dank erstmal für die Antwort. Das hat mir schon sehr geholfen.

Die Skala mit den werten habe ich bereits hinbekommen.
Der Pfeil bewegt sich auch schon, nur springt er immer an seine Startposition zurück.
Was muss ich machen, damit der Pfeil an der gewünschten stelle bleibt?

#pfeil {
height:112px;
width:104px;
background-image: url("bild");
position: relative;
margin:2em 0;
animation-name:meine-animation;
animation-duration:4s;
animation-iteration-count:1;
}

@keyframes meine-animation {
from {
left:0;
}

to {
left:600px;
}
}

Perfekt vielen Dank.

Eine letzte Frage.....

Kann ich die @Keyframes anweisung auch direkt in eine Style-Anweisung aufnehmen?

Beispiel: <div style=" ">

@keyframes meine-animation {
from {
left:0;
}

to {
left:15%;
}
}

Gibt es eine Möglichkeit das ganze etwas dynamischer zu machen?
z.B. wenn ich eine Seite öffne habe ich einen anderen "to" wert als auf einer anderen Seite, ohne für jede "seite" mit einem Pfeil ein eigenes Keyframe zu erstellen