Zmiana koloru tekstu jeśli progressbar sięga

Question

poproszono mnie, aby wykonać te progressbars ale wygląda na niemożliwe, aby je ponieważ jeśli progressbar jest < 50% to jest z kolorem to jest biały. Jak uczynić połowę tekstu białą, a drugą połowę kolorem, jeśli pasek postępu wynosi 50%? Co się stanie, jeśli pasek postępu zatrzyma się w środku liczby? Jedyne rozwiązanie, o którym myślę, to sprawić, że tekst będzie czarny, ale może nie wyglądać dobrze w projekcie. Wszelkie sugestie?

Answer 1

Można użyć dwóch elementów div umieszczonych jeden nad drugim. Jeden z ramą drugi z paskiem postępu.

Albo przeczytać na tej article

Answer 2

Chciałbym podejść do tego poprzez dodanie tekstu do wewnątrz HTML (zakładając, że kod HTML na to pozwala) dla barów, a także utrzymanie go na zewnątrz, gdzie obecnie znajduje.

Używając CSS, przesuń tekst tak, aby znalazł się dokładnie nad kolorowym tekstem, ale był biały, co daje złudzenie zmieniającego się tekstu, ale biały tekst jest po prostu ujawniany, gdy pasek się rozciąga. Czy to ma sens?