HTML/CSS responsive step indicator

[Split1989]

moin moin,

möchte gerne einen resposiv step indicator bauen bekomme es aber leider nicht hin.
bekomme es nur mit fester breite und höhe hin. hätte aber gerne das der indicator 100% der seite einnimmt (in der breite)

so soll das ganze aussehen:
https://jsfiddle.net/Qh3AR/

habt ihr evtl irgendwelche tipps? bzw. exestierende lösungen zu dem problem?

probleme die ich habe bei der responsiv umsetzung habe:
- die kreise rund zu bekommen
- text mittig im kreis
- balken zwischen den kreisen mittig

Schöne Grüße
Spliti

 

[kbot]

also die Kreise sehen für mich rund aus ...
und der Text sieht auch mittig aus ...
und die Balken sind nicht mittig?

und um es auf 100% Breite zu kriegen, musst du doch theoretisch nur

.progr .bar {
        width: 3%;}

auf die gewünschte Prozentzahl bringen, oder?

so sieht dein Dingens bei mir im Chrome aus:

 

[Split1989]

ist zwar alles schön und gut so wie es ist. aber es passt sich nicht an die bildschirm breite an


habs jetzt hinbekommen wie ich es wollte

https://jsfiddle.net/Z83wH/2/