Beautifully animated countdowns for everyone. Soon is Plug & Play
and super easy to setup using the Visual Builder
. Pick one of the embedded responsive preset templates
as a starting point and work from there.
Looking for the WordPress version, click below.
You can further customize everything to your own liking with simple attributes described in the extensive documentation
Soon is mobile friendly and responsive
. It’s compatible with jQuery but you can use it without just as well. The package contains the original source files
, so if you’re tech savvy you can tweak it to your own liking.
If you run into trouble, I’m here to help you on your way
Use the Visual Builder
to build your own counters. No coding required. Pick a preset or a blank canvas, select colours, counter types, fonts, sizes. Just copy and paste the resulting snippet and you’re ready to roll.
jQuery (not required)
Soon has got jQuery support
, but if you’re not into jQuery that’s not a problem as Soon works without just as well.
Animations & Effects
All Soons counters are animated. For instance the text counter can be tweaked with different animation types like slide, roll, twirl and fade. On top of these animations Soon brings reflections to the table.
Soon scales to the available space around it. It’s as simple as that. It does not matter where you place it, Soon will make sure it looks great.
There’s three different clock faces to choose from. You’ve got your basic Text
. There’s a classic Flipper
and as a bonus there’s the Dot Matrix
counter. All three faces can be animated in various ways and have all kinds of sub styles.
Easily create an awesome circular counter
. Use solid colours, gradients, defined counter direction and set the offset, length and width of the ring. There’s visual effects like glow and shadow plus the ring progress is animated.
Next to the ring you’ve got the option to select a background fill
. This is sort of like a vertical, horizontal or diagonal progress bar. Animated and colours can be changed.
Soon comes with a wide range of countdown options
. Also, well tested support of timezones.
2016â02-25 count down towards a date;
2010â02-25 count up since a date;
in 2 hours count down a fixed amount of hours, minutes or seconds ;
at 12:30:15 count down repeatedly towards a time;
sunday at 10 count down repeatedly towards a time of day;
Pick between Year, Month, Week, Day, Hour, Minute, Seconds and Milliseconds. The cascade
feature allows you to move values between groups, so you can for instance count the total number of seconds till next year.
callbacks. Useful to show or hide elements when the timer runs out, or to make changes when there’s only a couple more seconds left on the clock.
By default if you don’t set a due or since date, Soon will render a clock, so if you’re looking for a fancy clock, Soon is the way to go.
You can manually set the time which Soon will use to do it’s calculations.
counters on the fly. There’s also the option to Freeze and Unfreeze the time.
ChromeSafariFirefoxOperaiOSAndroidIE10IE9 (no animations)IE8 (no animations, automatic fallback to text counter)
fixed flickering after browser tab was inactive.
fixed fill mode not working correctly.
added fill option which makes Soon scale up the counter to fill all available space.
added ‘weeks’ and ‘months’ formats.
added ‘milliseconds’ format.
added more font presets to Visual Builder.
added option to set custom Google WebFont in Visual Builder.
added freeze / unfreeze API.
added option to control the way Soon decides to hide counter groups on small screens.
improved performance of documentation.
improved API documentation.
improved timer algorithm.
added ‘hide’, ‘redirect’ and ‘function’ to on-complete option in Visual Builderimproved button layout for Visual Builderimproved browser support for Visual Builder1.5
added onTick callback method1.4
added CSS override field to visual builderadded seconds to time fields in visual builderadded presets select to visual builderadded option to create own presets to visual builderadded reset at time of day modeadded vertical and horizontal gradient modefixed bug in cross browser timezone related calculationsfixed ring glow colorfixed gradient ring problems on not full length rings and rings with different offsetsremoved reference to soon.css.map in unminified styles.css file 1.3
added placeholder setupadded max-scale settingadded due-in-time modeadded due-at-time modeadded due-at-day modeadded timezone support to visual builderadded redraw method to API to manually trigger redraw of a soon nodeimproved responsive behaviourimproved script embeddingfixed API destroy method bug where it would not removing the soon child nodes1.2
added a much improved visual builderadded dot matrix gradient fill stylesadded ring invert settingadded ring gradient fill stylesadded ring parts alignmentadded ring separate width controlsadded ring progress and background shadow added label coloring to visual builderadded label uppercase and lowercase style presetsadded separator coloring to visual builderadded data-auto=”false” to allow blocking of kickstartimproved ring label positioningimproved ring rendering performanceimproved ring default shadow stylesimproved setup of public APIfixed ticker reset bug where timer would not reset properlyfixed some incorrectly documented featuresfixed ring soft shadow being cut of at the bottomfixed ring gap preventing the progress part from reaching the end statefixed the fill reflection from being flipped the wrong way aroundfixed reset functionality1.1
added year denominatoradded count up mode1.0