DrawPRESENTATION OS
Start for free
← Help Center

Countdown

Display time remaining until a target date.

How to use

  1. Choose the target date and time.
  2. Configure time units and completion message.
  3. Check the appearance at completion.

Things to check

Time depends on the device clock and does not advance in static exports.

Property reference

Select the module in the editor to change its settings. Technical identifiers below are kept unchanged for reference; some advanced fields are stored as structured data rather than separate controls.

47 / 47

animateNumbers

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean
animated

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean
animationSpeed

Controls movement speed, duration or delay. Units are shown in the editor control; test timing in presentation mode.

number
backgroundColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
backgroundTransparent

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean
borderColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
borderRadius

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
borderWidth

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
completedMessage

Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.

string
completionAction

Action when the countdown ends; check alongside message or redirect settings.

string
completionMessage

Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.

string
description

Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.

string
fontSize

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
format

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

string
glowEffect

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean
gradientEnabled

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean
gradientEndColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
gradientStartColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
labelColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
labelFontSize

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
labelSize

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
numberColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
numberFontSize

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
numberSize

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
opacity

Visibility ratio: 0 is fully transparent and 1 is fully opaque.

number
padding

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
primaryColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
pulseEffect

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean
redirectUrl

An image, media or link source. Use the media picker or an accessible URL and verify it loads in the presentation.

string
secondaryColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
separator

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

string
separatorSymbol

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

string
shadowBlur

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
shadowColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
shadowEnabled

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean
showDays

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean
showHours

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean
showLabels

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean
showMinutes

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean
showSeconds

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean
showSeparators

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean
showZeros

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean
spacing

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
style

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'default' | 'circular' | 'minimal' | 'card' | 'modern' | 'classic' | 'digital' | 'flip' | 'neon'
targetDate

Countdown target date and time; check the device time zone.

string
textColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
title

Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.

string