So I managed to add a progress bar to the timer (it will run in the last 60 seconds of the timer), but I can’t figure out how to center the actual timer (ie, the text that says 0:59, 0:58 etc). Right now it is aligned to the left to start with and gradually moves to the center along with the progress bar. You will see that it will start moving when the timer has about 40 seconds left to go. Any ideas how to fix this?
Thanks in advance!
Try using flexbox. Add display: flex and justify-content: center on the parent element of timer-numbers.
hey thanks for the suggestion. it doesnt center it perfectly though. I`ve added the flexbox codes to the codepen - you can check it out if you have time!
Try adding some width to timer-progress.
mm nope didnt do the trick 
Line 75 in javascript resets the width to 0.
right, i forgot about that. but you see, i need the width to start at 0 because it should only appear once the timer starts counting down the last 60 seconds.
Set text color opacity as transparent?