These samples are great for if you'd like to show a live countdown (or count up!) in part of your prototype.

All of the samples here follow the same core pattern, that is to constantly loop between two pages while updating the counter on each page. The start value, and end value are easy to change, as are the size of each increment and the amount of time that time should pass between changes. When the counter hits the number you've specified as the final number (in these samples: 0).

Count-down from 60

This sample counts down from 60 seconds. To increase or decrease the time, you can simply open the variables modal by pressing 'v' and changing the number within the variable. Any number will work!

Skill level: Basic

Interact with or copy & edit the sample
(simply click the copy & edit button in the bottom right)

Count-down from 60 with animation

Similar to the sample above, this sample adds a nice little transition between pages. 

Skill level: Relatively basic

Interact with or copy & edit the sample
(simply click the copy & edit button in the bottom right)

Count-down from 60 with circular progress bar

This sample adds a circular progress bar around the timer, using rotating semicircles and a super long 30 second page transition! If you're interested in how it works, copy & edit the sample and have a play.

Skill level: More advanced

Interact with or copy & edit the sample
(simply click the copy & edit button in the bottom right)

Count-down from 60 w/ circular progress bar & animated timer

This sample combines the circular progress bar with the animated timer from the second sample.

Skill level: More advanced

Interact with or copy & edit the sample
(simply click the copy & edit button in the bottom right)

Did this answer your question?