Countdown Timer

Click to preview the Countdown Timer demo. View demo

Default Countdown Timers

Code:

<div class="soon dg-soon-text" data-separator="|" data-due="2019-04-27" data-layout="group" data-scale-max="xxl" data-face="slot slide up"> <span class="soon-placeholder"> </span> </div> <div class="soon dg-soon-text" data-separator="|" data-due="2022-08-27" data-layout="group" data-scale-max="l" data-face="slot slide up"> <span class="soon-placeholder"> </span> </div> <div class="soon dg-soon-text" data-separator="|" data-due="2022-08-27" data-layout="group" data-scale-max="s" data-face="slot slide up"> <span class="soon-placeholder"> </span> </div>

Circle Countdown Timers

Code:

<div class="soon dg-soon-round" data-due="2022-08-27" data-layout="group" data-scale-max="xxl" data-face="slot" data-visual="fill corners-sharp color-light"> </div> <div class="soon dg-soon-round" data-due="2022-08-27" data-layout="group" data-scale-max="l" data-face="slot" data-visual="fill corners-sharp color-light"> </div> <div class="soon dg-soon-round" data-due="2022-08-27" data-layout="group" data-scale-max="s" data-face="slot" data-visual="fill corners-sharp color-light"> </div>

Rectangle Countdown Timers

Code:

<div class="soon dg-soon-square" data-due="2022-08-27" data-layout="group" data-scale-max="xxl" data-face="slot" data-visual="fill corners-sharp color-light"> </div> <div class="soon dg-soon-square" data-due="2022-08-27" data-layout="group" data-scale-max="l" data-face="slot" data-visual="fill corners-sharp color-light"> </div> <div class="soon dg-soon-square" data-due="2022-08-27" data-layout="group" data-scale-max="s" data-face="slot" data-visual="fill corners-sharp color-light"> </div>

Flip Countdown Timers

Code:

<div class="soon dg-soon-flip" data-due="2022-08-27" data-layout="group" data-scale-max="xxl" data-face="flip corners-sharp color-dark"> <span class="soon-placeholder"> </span> </div>

Ring Countdown Timers

Code:

<div class="soon dg-soon-cap-round" data-layout="group" data-format="d,h,m,s" data-separate-chars="false" data-padding="false" data-due="2022-08-27" data-face="slot" data-scale-max="xl" data-visual="ring color-dark shadow-soft cap-round progressgradient-1ed2da_20aeeb"> </div>