pqina supports this item


This author's response time can be up to 1 business day.

79 comments found.

Hi @pqina – Any best-practice article or tutorial on how to properly use Soon in Angular? Will appreciate it if you can point me to a good article/tutorial or if you can write/create one ASAP.

@pqina – I came across a difficult hurdle with the “event-tick” and “event-complete” options. In AngularJS, it is valid or legal to have an attribute value in dotted notation. For example, I can use “vm.myFunction()” as the value for the attribute “ng-change”, where “vm.myFunction()” resides in an Angular Controller (not a public variable/function, but a.function that is declared as a “var” inside the Controller function).

My question is: Which function(s) or code in “Soon.js” needs to be modified to enable the correct handling of the function (in dotted notation) assigned to “event-tick” and “event-complete” attributes/options. Can you point me to the location of the function(s) and provide instructions and the code snippet(s) to effect the change in Soon.js?

I’m on a tight deadline, so any assistance sent this way will be much appreciated.

Hi, Can you contact me through the contact form on my profile page, that way we can use e-mail to communicate which is a bit easier than forum comments. :)

@pqina, I looked at the source code and found a temporary work-around for “event-complete”, but not for “event-tick”. I was a bit surprised to see they’re coded differently… Also, I hope you’ll add a set of functions to save the timer’s current state when there’s a need to temporarily pause the timer, and then resume where the user left off. I coded it myself, but it’d be nice if it’s already available as a library function.

For some reason I cannot debug, a call to the freeze() function doesn’t work on page reload. On first load, the freeze() call works, but when switching to another page, and then going back to the first page where I expect the call to the freeze() function to work, it does NOT freeze the timer (the progress visual continues to move). Any ideas why this happens?

Alright, that sounds exciting :)

Maybe this is of some help to you: Soon stores all counters in an array. Then with the getSoon methods counters can be retrieved by HTML element. My best guess would be that after page reload Angular has generated Soon with a new element and Soon can no longer find the original counter? Do other methods work (redraw / reset / setOption)? Use web inspector and set a custom property on the Soon counter element, then after switching pages, look if the property is still there, if not, it’s a new element. Of course this is guess work for me but I know how frustrating debugging these sort of things can be so hope it’s of help to you.

@pqina – thanks for the feedback/input. Yes, all the other methods work. When the page is [re]loaded, I actually create an instance of the Soon element on DOM ready (if it does not exist), reset the timer’s time, and call freeze(). But this freeze() call doesn’t seem to take effect on a page REload as I described… Anyway, I’ll check out the Soon code to see if I can make any adjustments to make it work.

Alright, good luck!

can this countdown to the bottom of the hour? So use the server time and have it reset every hour?

It would count down from the start of the 25th of February to 1 hour later so unless it’s 00:00 at your location the counter will show 0.

Removing the data-now property will have it countdown 1 hour starting from page load.

I dont want the counter to countdown when the page loads. I want the counter to show how much is left in this hour. If its 8:45am then the counter will show 15 minutes. Then when the hour ends the counter goes back to 59 minutes and start over again until the end of that hour. Is this possible? thanks for your help on this.

Ah, I get it now. See the code snippet below, that should do the trick.

<div class="counter" />

<!-- Make sure you have loaded the soon script before running the script below -->



  // function to add zeros in front of singular values
  function pad(value){return ('00' + value).slice(-2)};

  // get the current time and set it to the next whole hour
  var now = new Date();
  now.setHours(now.getHours() + Math.ceil((now.getMinutes() + 1) / 60));
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var date = now.getDate();
  var dueISO = year + '-' + pad(month) + '-' + pad(date) + 'T' + pad(now.getHours()) + ':00';

  // get the counter and create a soon counter
  var counter = document.querySelector('.counter');
        'due':'in 1 hour'




Is there a way to get the countdown to work to a time as well rather than just the day – i want to do to 10am on a particular day.

Please help me.

Thanks ismail

Yes you can, no problem. :)

As you can see in the docs (http://rikschennink.nl/products/soon/docs.html#topic-quick-setup-setting-a-date): 2016-11-25T22:10 counts to a specific time.

You can also use the Visual Builder to select a specific time on a specific date.

It works!

Thank you very much.

How i can add the Soon Countdown in my Joomla website in Russian lang.? Maybe I can add with joomla HTML modul? If it is possible to insert a Soon Countdown into my joomla website, I’ll buy it. thanks for your answer.


You can set the labels using the attributes defined on the following page: http://rikschennink.nl/products/soon/docs.html#topic-setting-the-counter-format-label-names

I think something like this should work for adding the custom HTML. http://extensions.joomla.org/extension/custom-html-advanced

Help me to paste the code into my site. What are the files in the folders I need to add? I generated snippet inserted in the module, but only seen the name. Please help me. http://screenshot.ru/e7122049eeb281dc2c7c52c165e0a5dd http://screenshot.ru/036e3fb672f6e0a3e8775993c5c635fc

Hi! You need to add the soon.min.css and soon.min.js files to your Joomla site. The bottom two fields in your screenshot I think can be used just for that purpose. I don’t know where those files should be uploaded that depends on your Joomla install I think.

Just a heads up on a problem I had trying to get this to work with in Laravel…

I couldnt get it to work at all and got a little frustrated with it until I changed…


<script src=”/js/soon.min.js” data-auto=”false”></script>

to this

<script src=”/js/soon.min.js”></script>

Hi! Thanks for posting this solution. When data-auto is set to false the script will not automatically load counters on the page. View the page below for more information: http://rikschennink.nl/products/soon/docs.html#topic-linking-to-other-functionality-kickstart

Welcome! Hmm It would seem all of the demos has this on because none of them would load for me.

Odd, I’ll see if I can reproduce the issue. Glad it’s working now.

Hi. I’m initializing the Soon with Create method. Those are my property:

    'due'               :'2016-10-31T12:00:00',
    'layout'            :'group',
    'scaleMax'          :'fill',
    'format'            :'d,h,m,s',
    'face'              :'slot roll left fast',
    'visual'            :'ring invert ring-width-custom align-center length-100',
    'labelsDays'        :'dni,dni',
    'labelsHours'       :'ur,ur',
    'labelsMinutes'     :'minut,minut',
    'labelsSeconds'     :'sekund,sekund'

I’m using fill mode but on the element the attribute is set like that data-scale-max=”fill” data-scale=”l”. Why is data-scale even set? I’m testing the Visual builder and there is no data-scale when setting fill mode. Also if I compere to VB the font-size isn’t added as attribute on my example.

Thanks for help!

Hi! data-scale is set by Soon itself, it will determine the current scale based on the available space. The attribute is then used by the CSS to determine font sizes etc.

hi i just purchased soon. i am creating a wordpress plugin i i tried inserting the example into the html code that i was using nothing happened i am not using jquery the html file is being created in php

this is what inserted i also added the min .css statement and min.js statement as in instructions for installation

<!- due date set ->

<script> $(document).ready(function() { </script>

// create a simple soon counter on the supplied element
// create a more advanced counter
    layout:"group tight",
    face:"flip color-light corners-sharp shadow-soft",
    eventComplete:function(){ alert("done!"); }

what do i have to add to make it work in php and html code


Adding CSS and JS files should be enough. Soon will then automatically pick up HTML DIV tags with the soon class.

Please use the support tab for further support. It’s easier to communicate via e-mail. Thanks! :-)

everythng works – i copied js and css paths incorrectly

if someone else has same problem – check your js and css path and copy basic example – you have to modify it a bit to work i used

<link rel="stylesheet" href="<?php echo plugins_url('aclock\bin\css\soon.min.css', dirname(FILE)); ?>" type="text/css">

and it works not

<link href=”css/soon.min.css” rel=”stylesheet”>

maybe it was my typing

Glad to hear it’s working! :-)

You state in the docs “If you are using a module loader it’s adviced to use the soon.module.js file. This version of Soon does not contain the kickstart feature….”

How do I use this version of the plugin. I can’t seem to get the normal plugin to work on safari.

Hi, my guess would be the problem originates from the fact that the date is not in ISO 8601 format. 2016-12-1 should be 2016-12-01. Does that solve the issue?

You the man! Works.

Fantastic! :)

Hi, can i use in a wordpress theme that sell on themeforest if buy extended license?

Hi! Yes you can, please read this entry in the FAQ for more details:


I there, nice pluggin. I don´t now what i did wrong, but my counter doesn’t updates, when the days pass by, always sows same values. Think you can help me www.wasabi.es

Hi, You’ve set the now property to a fixed value which will always result in the same count down amount, if you remove this line all will be fixed:


@pqina – It is only displaying the first unit of the format. If I keep d,h,m,s. It shows only the date. if I keep w,d,h,m,s it shows only week. Unsure what is going wrong.

Hi! That’s odd :-) Can you post the whole snippet? (template plus counter JavaScript)

Hello, is it posible to use this countdown on HTML5 banners?

I don’t think the CodeCanyon licenses cover use on HTML5 banners/ads (if they are used on different domains). Best to contact Envato support and ask to be sure before purchasing.

Can the setOption be used to set both due and now ?

Hi, you can use Soon.setOptions(element,{'due':'2017','now':'2016'}) to set multiple properties simultaneously.

Hi, can you explain me, this item includes dots, line and swap plugins (3in1)? For example, when I need dots effect, I can buy Soon counter just with dots effects – https://codecanyon.net/item/dots-countdown-responsive-dot-matrix-counter-plugin/19368772 – Do I understand it correctly? – or this 3 items are addons? Thank you.

Hi! If you only need the Dot Matrix counter it’s best to buy the Dots product. Soon contains earlier versions of Dots/Line/Flip and Swap plus a visual builder. Eventually I will update Soon to the new code used in the separate products but at is still some time away.

Hello, how do I make the counter into a gif like how you have it in your example?

Like this: https://camo.envatousercontent.com/db46d3d2b6974893f5b877ea5b8405f63bf59f41/687474703a2f2f72696b736368656e6e696e6b2e6e6c2f6d656469612f656e7661746f2f616e696d6174696f6e2d7365742d30322e676966

i did not find an example in the doc folder. Thank you.


Soon Countdown is a HTML and CSS counter, the GIF animations on the product page are there to show how the resulting counters look in the browser. This is not a feature of Soon (and is not advertised as such).

You can however generate a counter and then capture the animation with a tool like LICEcap.


Hi, Im looking for a countdown function that could fetch its countdown date from a array of dates. The countdown should be displayed for the earliest date (that has not been passed). When that date has been passed then next date in the array should be used for countdown. Is this something this script can do?

Hi, This is not something this script can do, the functionality however is available in my other countdown plugins:

- Flip

- Line

- Swap

- Dots

work perfect in my client site! https://www.dotweb.co.il

is there anyway to have the countdown for a given amount continue based on a session, at the moment if you refresh the page it just starts again

Hmmm, no that’s something I haven’t tested. But glad to hear it works with a direct snippet.

everything else works fine just the session bit, be cool if you can have that working in the future, thanks for quick response anyways! :)

No problem, will put it on my todo list for future consideration.