Dots

Price
$9
Includes
  • future updates
  • 6 months professional support

Tick Dots Counter is the Web's most advanced Dot Matrix counter plugin. It's easy to setup, amazingly flexible and ships with beautiful animations.

Whether you want to visualize visitor counts, count down to a date, show upload progress, social media followers, or donation status, Tick has got your use case covered.

Features:

Works standalone but ships with handy wrapper for jQuery.

Buy Dots Counter Now

Presets

The Dots package ships with the following 10 presets.

They are setup to be used as a starting point for your project and illustrate what can be achieved with Dots Tick Counter.

This is the classic "count down to date" counter. It can among other things be configured based on timezone and automatically sync to the server date.

Learn more about counting down

The counter dots can be automatically colored with a horizontal or vertical gradient.

Learn about dot colors

Count according to a set schedule. This counter will reach zero every 5 minutes. Tick features hourly, daily, weekly, montly and yearly scheduling options.

Learn about scheduling

Counter values can be set to numeric, string or array values. By setting dots horizontal margin to zero we can also fuse dots together.

Learn about value transforms
We've already planted
trees this year

Counter dots can be individually styled, in this case box-shadow is used to make the dots look like trees.

Learn more about dots counter

Counter shows the current time in a nicely animated fashion. Dot animations can be finely tuned to your liking using transitions.

Learn more about transitions
m
s
ms

Intervals can be paused, resumed, stopped and started making all sorts of time based counter controls possible.

Learn more about the timer

Counter can also count up since a date. This counter counts up from the 1st of January 2017.

Learn more about counting up

A counter that renders a total donated value using the number transform. Using CSS the donation goal progress is indicated.

Learn more about value transforms
Reached new followers since start of

Counters can be placed inside running text and will still render beautifully.

Learn more about layouting

Feature Overview

Dot Matrix

The Dots view renders a beautifully animated dot matrix display.

Presets

The package includes the 10 presets shown above featuring the following functionality.

Responsive

Will work flawlessly on small and big screens.

Technical

Optimized for performance and flexibility

Support

We care about you our customer.

Browsers

Tested on the following browsers. If not supported, Tick does not load and shows the HTML fallback content.

Quick Tutorial

Building Tick Counters is very similar to building with Legos.

Start with the base .tick block:

<div class="tick">

</div>

Now, we haven't yet entered a value so we don't see anything on the screen.

So let's do that now, add a value using the data-value attribute.

<div class="tick"
     data-value="1808">

</div>

Tick now automatically adds a plain "text" view to present our value.

We can also present strings instead of numbers.

<div class="tick"
     data-value="Hello World">

</div>

This is useful but not very spectacular, let's do something more interesting. We'll switch back to numbers and setup a "dots" counter.

We tell Tick to render a different view by adding an HTML element with a data-view attribute.

<div class="tick"
     data-value="180815">

    <span data-view="dots"></span>

</div>

There! That's a lot better. Let's now align our counter to the middle of the page.

There's a special attribute called data-layout that will help us with positioning. We'll tell it we want a horizontal row of presenters and we want them aligned to the center of the page.

<div class="tick"
     data-value="180815">

    <div data-layout="horizontal center">

        <span data-view="dots"></span>

    </div>

</div>

While Tick is great for static counters, it really shines for counters that are regularly updated.

Let's update our counter each second. We'll do that by binding a function to the data-did-init callback.

<div class="tick"
     data-value="180815"
     data-did-init="handleTickInit">

    <div data-layout="horizontal center">

        <span data-view="dots"></span>

    </div>

</div>
<script>
function handleTickInit(tick) {

    // The Tick `interval` function is 
    // an easy way to quickly setup a timer
    Tick.helper.interval(function() {
    
        // We simply increase the value 
        // of our ticker each second
        tick.value++;
    
    });

}
</script>

So there you have it, a simple counter build with Tick.

Read the documentation to take a deep dive into what's possible with Tick.