Simple Percent Count down numbers and Bar

(Mark Hunte) #1

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)

How easily create an animated number counter?
(Mark Hunte) #2

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

Percentage count up 1-100% code
Progress Bar for Scenes
Javascript function "increase level bar for a game (percentage or pixels)"
Display Percent by Time Duration
(Sadok Cervantes) #3

@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!!

(Greg) #4

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


Please try again - seems to work.

(BIlly) #6

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

(Mark Hunte) #7

I just downloaded it and it opens fine.

Are you using the Pro Version ?

(Mark Hunte) #8

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

(BIlly) #9

Yes using Pro v3.5.2 (528).

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

(Mark Hunte) #10

It sounds like the problem is you end.

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

(Jonathan Deutsch) #11

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

(BIlly) #12

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.

(Jonathan Deutsch) #13

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

(BIlly) #14

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

(Greg) #15

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.


(Mark Hunte) #16

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

(Greg) #17

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?


(Mark Hunte) #18

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…

(Greg) #19

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

(Mark Hunte) #20

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