Mi è già più chiaro ma la cosa si complica un po'.

In linea generale procederei in questo modo:

Andrei comunque ad inglobare il tutto dentro una classe (o "oggetto") javascript. Ad esempio lo possiamo chiamare "ProgBar".

L'argomento della programmazione orientata agli oggetti è abbastanza ampio per cui non mi dilungo troppo a descriverne tutti i vari eventuali concetti nel dettaglio, ma ti indico giusto quali sono i pro che potresti ottenere con un approccio del genere rispetto ad una programmazione più tradizionale, come nel tuo esempio.

Il nostro oggetto ProgBar potrà essere istanziato, passandogli magari un parametro per identificare l'elemento HTML da utilizzare come contenitore, e conterrà tutte le funzioni (metodi dell'oggetto), le variabili (proprietà dell'oggetto), gli eventi (per i quali si potranno definire dei callback) che serviranno all'intero suo funzionamento.

In questo modo si ottiene un certo ordine anche a livello programmatico oltre ad avere una più semplice gestione all'interno di un progetto più ampio (che sia più o meno complesso).

Ad esempio questo evita l'uso indiscriminato di variabili volanti che servono solo per gestire gli elementi della barra ma che diversamente vagherebbero a livello globale senza troppo controllo.

Il fatto che il tutto viene gestito col PHP mi fa presupporre che l'avanzamento della barra, e l'attuale valore/posizione, debba poter essere reimpostato al volo in qualsiasi momento, magari con delle richieste AJAX che interrogano il PHP e restituiscano ad esempio il valore attuale per il quale deve essere impostata appunto la posizione della barra; magari il valore in percentuale.

L'oggetto ProgBar potrebbe quindi disporre di un metodo setValue() che imposta il valore percentuale con un'apposita variabile (interna all'oggetto), quindi un altro metodo redraw() che si occupa di ridisegnare opportunamente la barra in base al valore attuale, un metodo init() per l'inizializzazione, delle funzioni per particolari eventi (come il cambio di valore ogni tot tempo), delle altre funzioni per i suoi calcoli interni, ecc. Un po' come hai già fatto ma rivedendo il tutto con un approccio OOP.

Per quanto riguarda la parte HTML io mi limiterei ad usare un semplice <div> come contenitore (dove sarà poi costruito il necessario per disegnare barra, testi, eventuali altri elementi), di cui sarà passato il suo riferimento alla funzione di inizializzazione dell'oggetto. Magari si può pensare di utilizzare un selettore jQuery così da poter passare come meglio si crede questo riferimento (usando un id, una class, una qualsiasi stringa di selezione CSS, il diretto riferimento all'elemento DOM, ecc.); magari con la possibilità che il riferimento identifichi più elementi, i quali andranno istanziati singolarmente usando un ciclo.

Ancora, il tag <div> potrebbe essere pensato per poter impostare delle proprietà (in modo da personalizzare l'istanza), magari tramite l'uso di attributi data-; ad esempio potrebbe esserci un attributo data-val per poter impostare il valore percentuale iniziale, o quello della data iniziale per la quale sarà calcolato poi il valore percentuale, o qualsiasi altra proprietà che si voglia poter gestire in questo modo. Questo evita di iniettare la parte JavaScript con dei valori passati dal PHP, come hai fatto nel tuo codice di esempio.

La personalizzazione (anche se solo per impostare un valore attuale come stato iniziale) è sempre meglio gestirla separatamente da quello che sarà invece il core (lo script proprio dell'oggetto ProgBar). Ciò che viene personalizzato è l'istanza di tale oggetto, non l'oggetto (classe) in sé.

E' possibile usare diverse tecniche per lo scopo: attraverso appunto gli attributi applicati al tag HTML; attraverso il passaggio di parametri come argomenti del costruttore (o della funzione init) dell'oggetto; attraverso il CSS per definire più che altro l'aspetto estetico; altri eventuali metodi.

Tali tecniche possono essere anche utilizzate assieme; ad esempio si può pensare di predisporre l'oggetto in modo che il suo valore possa essere impostato indipendentemente attraverso un parametro di inizializzazione o attraverso il suo attributo data-val, e magari che sia possibile aggiornare al volo il redraw modificando direttamente data-val, anche run-time magari dopo una risposta da una chiamata AJAX eseguita per recuperare tale dato lato serve.

Per concludere, se vuoi tentare un approccio di questo tipo, sicuramente rivolto ad ottimizzare, nonché rendere più funzionale, quel tuo stesso script, posso darti qualche consiglio più dettagliato su come procedere, così che tu possa comunque familiarizzare con la OOP.

In caso contrario, se ciò che chiedi è solo rivolto a snellire un po' lo script mantenendo comunque quell'impostazione, personalmente posso dirti (senza offesa) "se funziona lascialo purè così", per quelle poche righe non c'è molto da ridurre, anche se possibile; in tal caso può essere un buon compromesso minimizzare lo script con un qualsiasi servizio disponibile online