Monatsrückblick Januar/Februar 2026 ist online!

[G4l4h4d]

Hallo Forum, ich würde gerne die Spieldauer eines Songs in einer bar darstellen.
Bei einer durchgehenden bar habe ich keine Probleme. Ich würde das Ganze gerne in so einer bar darstellen

Leider fehlt mir dazu ein wenig der Ansatz. Über einen kleinen Input wäre ich sehr dankbar.
Oder über eine andere gute Lösung

[dos1973]

@G4l4h4d
Ich würde einen balken ergänzen (insgesamt 10) und dann mit zb Sichtbarkeit arbeiten.
Wenn grösser 10%/ anzeigen
größer 20 %etc.

[G4l4h4d]

@dos1973
Das habe ich gerade mal umgesetzt, dann erscheint der jeweilige Balken. Allerdings habe ich dann kein Fülleffekt. Ich möchte ja die "leeren" Balken wie oben schon eingeblendet haben. Dann müsste sich jeder Balken nach Zeit oder Prozent füllen.

[dos1973]

du hast 10 leere Balken
und legst 10 gefüllte darüber.

die gefüllten werden nur in Abhängigkeit der %% angezeigt und sind sonst nicht sichtbar,

[Coffeelover]

Du könntest 10 von diesen nehmen und bei Min/Max die Grenzen des 10tels eintragen. Also Min 40, Max 49,999% usw.
VG

Edit: Ich wollte eigentlich noch ein Widget einfügen:

[{"tpl":"tplValueFloatBar","data":{"oid":"spotify-premium.0.player.progressPercentage","g_fixed":true,"g_visibility":true,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","min":"0","max":"100","orientation":"horizontal","color":"#1DB954","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"visibility-oid":"spotify-premium.0.player.isPlaying"},"style":{"left":"205px","top":"787px","height":"5px","width":"338px","z-index":"5"},"widgetSet":"basic"}]

[AlCalzone]

@G4l4h4d Quick&Dirty: Einen normalen Fortschrittsbalken nehmen und jeweils bei 10, 20, ... % ein Rechteck in der Hintergrundfarbe drüber legen