Countdown Timer

Overview

If you want to add a timer to your web page then the Countdown Timer Widget is right choice. It is fully customizable countdown timer in which you can modify it according to your need. You can insert it where ever you want in your web page whether it is a limited sale page or any other place.

Screenshot

The following is a GIF video to show you how to use the countdown timer widget and the various options available :
countdown timer

Countdown Timer Widget

The following is a countdown timer widget :

Countdown Timer Expired

Days
Hours
Minutes
Seconds

Countdown Timer

  • Expiration Date : Set a date from which the timer countdown starts.
  • Time Zone : Choose from server time or user local computer time.
  • Color : Set the timer number Color.
  • Typography : Set the font and text style of timer number.
  • Spacing : Set space around timer number.
  • Days : Toggle the display of days.
  • Hours : Toggle the display of hours.
  • Minutes : Toggle the display of minutes.
  • Seconds : Toggle the display of seconds.

Timer Style

  • Show Title : Toggle display of timer title like days, hours etc.
  • Custom Title : Toggle to edit the text of timer title.
  • Text Color : Set the timer title color.
  • Typography : Set the font and text style of timer title.

Expired Text

  • Expired Text : Toggle display of text after the timer ends (expired text).
  • Text : Enter text to be shown after timer ends.
  • Text Color : Set the expired text color.
  • Expired Text Style : Set the font and text style of expired text.
  • Padding : Set padding around expired text.
  • Alignment : Select the alignment for expired text from Left, Center and Right.

Countdown Block

  • Display : Choose from Block or Inline to display number and text in top and bottom side or in one line.
  • Background Color : Set the color of countdown block.
  • Padding : Set padding of countdown block.
  • Outside Spacing : Set the space around the countdown block.

Normal

  • Border Type : Set the border type.
  • Border Color : Set the border color.
  • Border Width : Set the border width.
  • Border Radius : Set the border radius.
  • Shadow : Set the shadow of the content box.

Hover

  • Border Type : Set the border type
  • Border Color : Set the border color
  • Border Width : Set the border width
  • Border Radius : Set the border radius
  • Shadow : Set the shadow of the content box.
Was this helpful to you?