CSS Multi step progressbar mit Zwischenschritten

S3cret

Ensign
Registriert
Dez. 2012
Beiträge
245
Moin,
ich möchte auf einer Webseite eine mehrschrittige Progressbar integrieren und habe diese gefunden:
https://codepen.io/athimannil/pen/wWPYZQ

Was ich nur noch gern hätte ist die Möglichkeit Zwischenschritte zu bestimmen. Zwischenschritte sollen nicht sichtbar sein, im Grunde soll lediglich der Balken hinter dem aktiven Schritt zu x% zum nächsten Schritt eingefärbt sein.

Ich hatte drüber nachgedachtb versteckte li Elemente einzubauen, aber das zerstört mir die Skalierung (der Abstand zwischen den sichtbaren Schritten sollte gleich sein. Dann hab ich versucht mit meinen schlechten CSS Skills das hinzubekommen, aber lässt sich überhaupt definieren, dass der Strich die ersten x% zu einem nächsten Element in Farbe a sein soll und die restlichen in Farbe b?

Danke für jeden Tipp!
 
S3cret schrieb:
Dann hab ich versucht mit meinen schlechten CSS Skills das hinzubekommen, aber lässt sich überhaupt definieren, dass der Strich die ersten x% zu einem nächsten Element in Farbe a sein soll und die restlichen in Farbe b?
Vielleicht kannst du was mit Gradients machen. Also Farbverläufe. Aber damit ist es möglich Hintergründe mehrfarbig zu machen. Statt einem schönen Verlauf, lassen sich auch "harte" Übergänge definieren.

Kann gerade kein Beispiel basteln, aber hier gibts mehr Infos zum Thema: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients
 
Zurück
Oben