Simple Progress Indicator (with CSS)

CleanShot 2024-07-02 at 10.22.25

Here is a simple progress indicator. It uses CSS to configure and animate the little dots based on a dataset class that is applied. To apply the dataset, I'm using Hype Reactive Content, as you can see in my function call, but there is also a regular Hype native functions version. I just prefer Hype Reactive Content in this case to leverage the ease of use of function calling with custom parameters. If you're interested in a regular Hype function version, just create one function per dataset assignment.

Download Version (Within Transition, Hype Native):
progressIndicatorOnTransition-HypeNative.hype.zip (65,8 KB)

Download Version (Within Transition, Hype Reactive Content):
progressIndicatorOnTransition-HypeReactiveContent.hype.zip (66,0 KB)


Hype has a bug/quirk I just discovered: you can click on an element even though you are in transition. I addressed this by firing a custom behavior after the transition action click, as that actually triggers the custom behavior in the new scene (acting like a debounce trigger).

2 Likes

A post was split to a new topic: Checking if a scene transition is in progress