Harlowe 3.1.0 - Creating a loading screen

This questions has been asked before and I’m using parts of answers from different forums in my passage. That said, I am now stuck and would love further assistance!

Background Information

  • I am trying to create a loading screen with a loading bar like you’d see in games. Here’s a youtube example. I’d like to make it so that there is a grey border (1 px), the percentage written within the border (in black), and the border/box to slowly get filled as the percentage increases (the fill should be white).
  • After reaching 100%, the screen will automatically move to a different passage
  • I got it so that the percent randomly increases in size within the specified range of 1 to 5.
  • I am using Harlowe 3.1.0 in Twine 2

And onto the code:

(set: $counter to 0)

(css: "border: 1px solid white; background: white;")|amount>[$counter](css: "border: 1px solid white; background: white;")[%]

(live: 0.15s)[
	(set: $counter to it + (random: 1,5))
	(if: $counter is >= 100)[(go-to: "Next Passage")]
	(replace: ?amount)[$counter]

Thank you in advance for any and all help!!