Graphical Countdown Timer Examples

• Documentation
• Download this sample

Countdown Timer - Text

 remaining

to the new year

Graphical Countdown Timer - Horizontal Bar

Graphical countdown timer, on fixed points of time. This example page sets the fixed points to time to start ten seconds before the page finished loading, and to end twenty seconds after the page finished loading.

Beginning time (defaults to ten seconds ago):  
Ending time (default to twenty seconds from now):  

Graphical Countdown Timer - Images

Notes

The first type of countdown timer is a text timer. There are actually three text timers shown in this example, each displaying a different formatting technique, although the results will appear similar to each other. View the source for this page to see how the formats are different for the timers.

The second type of countdown timer is a single bar, horizontally oriented. The bar has two colors: the foreground color and background color. Either or both colors can be made to change as the time elapses toward the countdown.

The third type is a single image that changes its source image as the time elapses toward the countdown.

For the purposes of demonstration, changes to the horizontal bar are set to happen at 50%, 75%, and 90% of the way through, as well as when the time elapses. You can set as many changes to happen at as many times as you desire.

All timers on this page are updated ten times each second.


^ Back to top