Simple Percent Count down numbers and Bar

This is a simple Percent count down with two counters.

A number count and a bar.

In this template the main code is in the header. And is called using a hype function with a button.
It is written this way to control when the count down starts. (24.2 KB)

Here is and updated version that can be set to progress down or up. (104.2 KB)


@MarkHunte I’m trying to download the files but it doesn’t work. Do you think you could upload them again? This is a project I’m currently figuring out. Thanks!!

Looks like the Server might be having issues, I can’t download anything either. Even from other postings.

Please try again - seems to work.

Is it possible to update this as it doesn’t open in hype. Says Resource is missing and the files corrupt. (Both zips)

I just downloaded it and it opens fine.

Are you using the Pro Version ?

Here is a non template version. Templates are for Pro. (104.2 KB)

Yes using Pro v3.5.2 (528).

Edit: Still getting Cannot open Resources and saying files corrupt.

It sounds like the problem is you end.

Try a reboot , logout and back in or a different internet connection…

Could also be the unarchive utility; I’d try control-clicking the zip in the finder and choose ‘Open With > Archive’

Had to explore file content and open the hype file within. Extracting seems to create a 2 level folder structure when should be one. Can open the templates now.

The says Document Version Incompaitibility even though I have 3.5.2 (528) Professional Edition.

528 is the beta version; 530 is the final release so you’ll probably need to move to the official version.

Ok thanks. Got the latest version now and file opens. Cheers.

Hi Mark

Thanks a lot for sharing this progress bar. It works great. However, I would like to tweak it by adding, for example, 40px to the green progress bar on mouse click. I tried triggering this code on button click but it doesn’t work

hypeDocument.getElementById(‘bar’).style.width = + “40px”;

How would I add 40px to the bar like that?

Thanks a lot for your help.


What green progress bar?

for the up count
The calculations are done by multipling percentTogo by 2 in the above example.
each step * 2
This means the width will change like this

if we multiply by 2.4 then we will change like this

This progress bar (it’s green when I open the project on my computer)

I understand multiplying the percent but would it be possible to add pixel values imstead of multiplying them?


There is no green set on the progress bar… as shown in the image you posted.??

What do you see here which one is green…

1 01

2 21

Probably but what are you actually trying to do…

1 Like

Yes Mark the second square definitely looks green to me. I guess my brain must have associated progress with green colour and I changed it to green myself. Anyways, I found a simpler solution without too much code as I’m still learning javascript.

Thanks for your help and sorry to mess this thread with stupid questions like that.

Best Wishes

No problem, there are normally simpler ways of doing things depending on your goals…