CSS "Progress Bar" darstellen

[Shadow1701]

Guten Morgen,

mir fällt kein besserer Titel ein. Verzeiht mir.

Ich habe einen DIV Container mit einer vorgegebenen Länge und Höhe. Da steht auch ein Text drinnen. Dieser DIV Container gehört zu einer Film Datenbank und soll jetzt die Information die mir die Software tsDoctor gegeben hat grafisch wiedergeben.

Beispiel:
Der Film ist 100 Minuten lang. Bei Minute 50 hat tsDoctor einen Fehler gefunden. Die Information dass das so ist habe ich in der DB gespeichert. Jetzt soll genau in der Mitte des DIV ein schmaler roter Strich dargestellt werden.
Jetzt habe ich bei Minute 22 einen weitere Fehler, jetzt soll bei Position 22% im Div ein weitere schmaler roter Strich dargestellt werden. usw....... Es kann ein Fehler sein, zwei Fehler oder 52. Egal.

Als Beispiel wie es aussehen soll habe ich einen Screenshot von tsDoctor gemacht, wichtig ist nur die grafische Darstellung der Fehler in Form der roten Striche:



Eine Möglichkeit wäre es DIV an DIV zu reihen: Für den Bereich ohne Fehler ein DIV mit entsprechender Breite und weißen Hintergrund. Dann ein DIV mit roten Hintergrund mit 1px Breite. Dann ein DIV mit weißen Hintergrund und entsprechnder Breite. usw.... Elegant ist das nicht.

Oder ich lasse PHP ein Hintergrundbild generieren das halt entsprechend aussieht. Das bekomme ich auch hin.

Da ich in CSS nicht so Sattefest bin frage ich euch ob das Sinn macht das mit CSS zu realisieren (und falls ja, wie) oder ob es besser wäre mit PHP die Bilder zu generieren und im DIV als Hintergrund einzupflegen.

 

[M4ttX]

Ganzen Bereich grün färben und fehler als div Element einfügen wär die trivialste Implementierung. Breite des Strichs 1px bzw. 1s/Gesamtzeit, wenn sich dadurch mehr als 1px ergibt.

 

[kim88]

Ich habe ein simples Codebeispiel gemacht mit dem du arbeiten kannst:

Der grüne Balken ist einfach ein grünes div Element mit der grünen Hintergrundfarbe:

Darin hast du einzelne Marker die absolut positioniert sind in rot.

Die breite des Markers (width) gibst du inline an, und musst du eben Berechnen. Kannst du auch in % angeben. Dann kannst du rechnen wie viel % von 100% markiert sein sollen. Das gleiche gilt für die Positionierung (left) auch das kannst du berechnen und line angeben.

https://codepen.io/srueegger/pen/VwBvEmp

Ergänzung (26. Dezember 2022)

Da ich in CSS nicht so Sattefest bin frage ich euch ob das Sinn macht das mit CSS zu realisieren (und falls ja, wie) oder ob es besser wäre mit PHP die Bilder zu generieren und im DIV als Hintergrund einzupflegen.

CSS ist immer besser, weil resposnive und bessere Ladezeit. Das Bild wird wenn man das Fenster grösser macht schnell verpixelt (ausser du generierst das dann jeweils neu, bringt aber nur mehr Komplexität rein).

Aussserdem kannst du mit CSS halt das ganze noch hübscher machen. z.b. Wenn man mit der Maus über den rot markierten BEreich fährt, kann der mit einer anderen Farbe gehiglighted werden, und du kanns z.b. noch eine Info als Tooltip ausgeben, etc.

 

[Iqra]

I’m Hinblick darauf das es nur um die Darstellung geht würde ich ich mich an der Stelle auf statische Darstellung beschränken, entweder per overlay und visibility:hidden (was den Platz nicht freigibt) oder zB 50 spans ohne weiteres margin nach Links und Rechts, die dann als grün initialisiert werden und zur Laufzeit bei Bedarf Color:red erhalten.
Mit 100 wäre wohl die einfachste Option. Einfach den Ganzzahligen Prozentwert nehmen und den zugehörigen Span in rot und fertig.

Oder nen grauen div als Hintergrund und dann zur Laufzeit Spans mit fester Breite drüber legen. Dann ist sie Auflösung flexibler. Wenn Fehler, roten Span einfügen. Sonst grünen.
Aber beachten, daß Dom manipulieren auch was kostet. Also asynchron arbeiten wenn möglich. Sonst wartet sein Arbeitsprozess auf den Darstellungsprozess.

 

[Shadow1701]

Danke dir @kim88 für das Code Beispiel, musste es natürlich noch ausbauen aber als Basis super.

Es ist fertig implementiert und gibt die Information schön übersichtlich aus.

Vielen Dank für eure Antworten und noch einen schönen Feiertag.