Prompt!
The "Containers - Countdown Timer" must be placed in the page so that the short code can be used correctly.
Default Countdown Timers
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
<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
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
<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
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
<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
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
<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
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
<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>