Countdowns Pack

A collection of premium templates for SPX Graphics

Lyn Vuong Nyberg

Last Update há um ano

This pack is a collection of various Clocks and Countdowns for live video or event production. The Countdowns Pack can be purchased from the SPX Store.

A collection of various templates from the Countdowns Template Pack.

Each template has a CSS file for customizing colors and fonts in addition to several built-in visual, layout, and functionality options. They can be used as-is or modified for the needs of the user.

The Countdown pack consists of multiple templates which are HTML graphics used via CasparCG or other HTML-capable playout systems, such as OBS, vMix, Ecamm, etc. The templates are easy to use and can be modified conveniently from the SPX user interface. 


SPX templates or extensions from the SPX Store are usually available as zip files for manual installation and as an executable installer for Windows machines. See knowledgebase articles on installing templates.


⚠ REMEMBER to make backup copies of the original files before making any changes.

The template can be used as-is for different purposes from the SPX UI. For advanced modifications or styling, the CSS and Javascript files can be modified.

Please see the HTML, CSS, and Javascript source code for options, comments, and additional developer information.

Color change

All templates uses a customize.css stylesheet file for a global color theme settings and this can be changed globally for all templates and they can be overwritten in each template's CSS styles. 

Font change

  • place a new font file in the fonts subfolder
  • link font file to the template by modifying CSS font file links


The Countdown pack comes with the following templates with varying designs and functionality.

Generic countdown

The Generic countdown template is a versatile tool for creating on-screen countdowns and clocks. It has two running modes:
  • A realtime clock
  • Countdown

The countdown can be shown in several ways (days, hours, minutes, seconds, and various combinations. This countdown also includes time offset (in +/- minutes).

The template comes with several example CSS themes and more can be created as needed for different layouts, fonts, and color schemes. The on-screen position can be customized to be top/middle/bottom/left/center/right using CSS properties. in the theme files.

Countdown with background image

Countdown with a background image (Countdown_BG_Image_SRC.html) is a template that is designed to display the countdown with a background image.

For easy customization, use your own images as a background. The template has the option to pick a background png-image from a folder and it can also have transparency for advanced effects and layer with video and other templates.

Countdown cartoony

Countdown cartoony (Countdown_Cartoony_SRC.html) is a very basic quiz/question timeout graphic with cartoony animations. Once the time reaches 0 the graphic "drops" out of the frame. See the source code for changing styles and animations.

Speaker timer

Speaker timer (Countdown_Speaker_SRC.html) is a professional speaker timer (countdown) for live corporate events.

The graphic is designed to be shown on an off-camera monitor to a speaker and has a progress bar and bright colors for notifying the speaker about the remaining time. Colors and timing rules can be modified in the files. The template comes with several example Theme files and more can be added by the user. The template also has a dropdown selector for picking a logo image from a folder.

See a separate KB article on this template

Countdown ring

The countdown ring (Countdown_Ring_SRC.html) is a template with a round progress indicator. The graphic is shown on the screen with PLAY and the countdown can be started with the CONTINUE command.

Customize your own colors by changing the properties in the CSS file.

Top corner countdown

Top corner countdown (Countdown_Top_Corner_SRC.html) is a Minimalistic text strap with several running modes: time, date, time date, countdown, and additional information text. The template has built-in controls for left and right positioning.


Stopwatch has the option to change a background image or leave it transparent, so it can be used as an overlay over a video. 

Stopwatch is shown on the screen with SPX's PLAY command and the timer is started and paused with subsequent CONTINUE commands. Please note th stopwatch can also be triggered with external devices (such as the Stream Deck) or from an external application using control API commands. Read this article on using API commands for more information.

API Counter

API Counter template demonstrates the use of SPX Control API and how it can be used to update a graphic on-screen. This template can be used as a click counter or other use cases requiring showing an incrementing score.

The template has two additional functions:
  • setValue()
  • changeValue()

    The current value can be set by sending the desired new integer value to the template; such as setValue(10).

    The current value can be changed by sending a modifier to the template; such as changeValue(-4) would decrement by 4, whereas invoking changeValue(100) would increment the value by 100.

Was this article helpful?

0 out of 0 liked this article

Still need help? Message Us