4 Best Count Up Timer Widgets to Use Free in 2024

It is amazing how small things impact hugely. If you want to emphasize the dependability or showcase time from a specific event, the best way is to display a count up timer on your site.

Just like count down timers, count up timers can also be very helpful on many occasions. The common use is to showcase the time from a date and time. Many businesses use count-from-time widgets as social proof.

Best Free Count Up clock widgets to display time duration on your site

CommonNinja’s Count-Up Clock

CommonNinja is an online service that provides 100+ of the best free widgets for your website. Its widgets library is diverse and covers many requirements, such as collecting information to converting visitors into leads and sales. Telegram Chat widget, website popup builder, animated number counter, and free brackets maker are some of them.

CommonNinja’s Count Up Clock includes many features, including layouts, skins, and customization options to create a custom digital count-up clock for your website.

Features:

• Animation types and layouts — CommoNinja provides four animation types (flip, tick, dissolve, and normal) and several layout options.
• Skins — These are different color schemes.
• Count-up timer settings — Change timer title and labels, set countup start time and choose timezone.
• Customize appearance — There are many customization options to design the look and feel of your count-up clock timer. Plus, there is a custom CSS field if you want to change the widget design at the element level according to your requirements.
• Change visibility of widget’s properties, analytics, and integrations with Google Analytics and Mixpanel.

How to create a count up clock using CommonNinja

Sign up on the CommonNinja website from here, search for the “Count up clock” widget on your widgets catalog, and start customizing it. Watch the video below to learn how:

The embed code

Once the widget is created, you can copy the embed code for the count up timer. It will be similar to the code snippet below:

<script src="https://cdn.commoninja.com/sdk/latest/commonninja.js" defer></script>
<div class="commonninja_component pid-4c933977-d696-472d-86c5-72fd1834f947"></div>

The bolded code line above loads an external JavaScript file, and the other one is used to identify the created widget (timer). So, if you’ve installed other CommonNinja widgets, such as the current weather widget or responsive PDF viewer on the page, you do not have to add the JavaScript part again.

Pricing

CommonNinja’s Count up clock widget is free to use. Its free plan is limited to one project, one widget, and 300 monthly views only. For more widgets, views, and unlock features such as custom CSS, a subscription to a paid plan is required, which starts from $5 per month.

Click here to get CommonNinja’s count-up clock.

Powr’s Count Up Timer

Powr is another service similar to CommonNinja, with 50+ powerful, customizable apps in its library. Social Feed, Pricing Table maker, FAQ box, Contact Form, Popup, and PayPal Button are some of them.

Its website count-up timer is equipped with many functionalities. One of them is the ability to calculate time from a date and display it as a count-up timer.

Powr’s website countdown timer is not only one of the easiest-to-use web countdown clock widgets but also one of the most sophisticated.

Here are why:

Customizable – Powr’s Count Down Timer plugin lets you change the colors, fonts, borders, backgrounds, etc., to resonate with your placements and brand color palette.
Live editing – The WYSIWYG editor lets you efficiently adjust the appearance of the online countup clock. No more going back and forth between live preview and editing modes!
Count Down or Count Up – Count down to date to create urgency or count up from a number for great social proof. Perfect for product launches (and launch jacking campaigns), new releases, and giveaway campaigns.
Localize – Do you want to translate timer details into your local languages? No problem.
Mobile responsive – Your animated timers will look beautiful on both desktop and mobile devices.
Message During and After Count – Display different messages during counting once it’s reached 0 so your visitors know that a sale or event is over.
Cloud Synched – One of the best features of the Powr’s Countup timer plugin is that it is cloud-synchronized. It means you can re-edit the timer again and use the timer in your sales funnels, giveaway pages, solo ad campaigns, websites, and tools that work anywhere!
On-site editing – Unlike other tools, Powr lets you seamlessly customize the widget from your site. For it, you have to be logged in to your account. See later parts of the demo below for an example.

Website countup widget

Powr’s Count up Timer is equipped with many customization options. Here is a short video on how to create a free count-up timer.

Powr provides these options:

• Seven timer types – Countdown to date, Countdown time, Countdown time per visitor, Countdown number per visitor, Count up number, Count up number per visitor, and Count up from date
• Enable/disable label appearance and change names of labels
• Set widget’s position – Fixed (showcase like a notification bar on top or bottom of the screen) and Default (place code where you want to display timer as an inline widget)
• Link counting from widget to a page
• Add CTA button
• Collect payments
• Set countdown timer animation
• Change font family, size, and colors of countup clock and texts
• Add custom CSS and JavaScript codes

Powr fetches the local time on your computer and uses it as the time of countup widget. So, you might want to convert your time to the right timezone.

HTML website countup timer code

Click on the publish button at the top right corner of the header. You will see a page similar to the given screenshot below.

Copy the code and paste it into the HTML editor of your landing page builder. The best part is Powr countdown timer is not capped in views nor limited to where you can use it. That means you can use the Powr countdown timer unlimited times anywhere!

Here is an example of Powr website count up timer:

So, what about the pricing?

Powr countup timer pricing

Powr’s website countdown timer is free for life! If you upgrade to the Business plan, you can get access to 50+ other apps like the email countdown timer, holiday countdown gadget, social feed, comments, and reviews.

Click here to get the Powr count up app for free.

Tickcounter

TickCounter is an online countup timer widget creator with multilingual and timezone support.

Features:

• Unlimited counters
• Visual editor
• Count up from ten years in past
• Use preferred timezone
• Add or remove time units you need, which include items like years, weeks, and months.
• Localize timer widget with 50+ supported languages
• SSL encryption
• Unique web count up timer page (see an example from here)
• Easy integrations

Here is a live version of the Tickcounter timer that shows the time passed from a specific time:

The free plan provides up to 100,000 views per month, and the only paid plan, which is Standards, costs $10/month. It comes with 1,000,000 counter views and more features, such as removing Tickcounter branding from embeddable count-up widgets.

HTML Count from date widget

If you want to develop your own count up timer, use the following script. It is made using pure JavaScript, CSS, and HTML. No JQuery is used, and the clock is highly customizable.

Insert the following CSS style code in the head (<head>) section of your website or landing page.

    <style>
        .countup {
            text-align: center;
            margin-bottom: 20px;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        }

        .countup .pitiyacountup {
            display: inline-block;
            padding: 10px;
            background: #151515;
            margin: 0;
            color: white;
            min-width: 2.6rem;
            margin-left: 13px;
            border-radius: 10px 0 0 10px;
        }

        .countup span[class*="timeRef"] {
            border-radius: 0 10px 10px 0;
            margin-left: 0;
            background: #ffc72e;
            color: black;
        }
    </style>

Copy and paste the JavaScript code below just above the closing body tag (</body>).

    <script>
        /*
        Count Up from Date and Time
        Author: @thepitiya / https://wwww.pitiya.com/website-count-up-timer-widgets.html
        */
        window.onload = function () {
            var g = document.getElementById('countuptimer');
            g.setAttribute("class", "countup");
            var e = '<span class="pitiyacountup days">00</span><span class="pitiyacountup timeRefDays">days</span><span class="pitiyacountup hours">00</span><span class="pitiyacountup timeRefHours">hours</span><span class="pitiyacountup minutes">00</span><span class="pitiyacountup timeRefMinutes">minutes</span><span class="pitiyacountup seconds">00</span><span class="pitiyacountup timeRefSeconds">seconds</span>';
            g.insertAdjacentHTML('afterbegin', e);
            var t = g.dataset.countup;
            countUpFromTime(t, 'countuptimer');
        };
        function countUpFromTime(countFrom, id) {
            countFrom = new Date(countFrom).getTime();
            var now = new Date(),
                countFrom = new Date(countFrom),
                timeDifference = (now - countFrom);

            var secondsInADay = 60 * 60 * 1000 * 24,
                secondsInAHour = 60 * 60 * 1000;

            days = Math.floor(timeDifference / (secondsInADay) * 1);
            hours = Math.floor((timeDifference % (secondsInADay)) / (secondsInAHour) * 1);
            mins = Math.floor(((timeDifference % (secondsInADay)) % (secondsInAHour)) / (60 * 1000) * 1);
            secs = Math.floor((((timeDifference % (secondsInADay)) % (secondsInAHour)) % (60 * 1000)) / 1000 * 1);

            var idEl = document.getElementById(id);
            idEl.getElementsByClassName('days')[0].innerHTML = days;
            idEl.getElementsByClassName('hours')[0].innerHTML = hours;
            idEl.getElementsByClassName('minutes')[0].innerHTML = mins;
            idEl.getElementsByClassName('seconds')[0].innerHTML = secs;

            clearTimeout(countUpFromTime.interval);
            countUpFromTime.interval = setTimeout(function () { countUpFromTime(countFrom, id); }, 1000);
        }
    </script>

Last, paste the HTML code where you want to embed the count-up timer widget.

    <div id="countuptimer" data-countup="Jan 1, 2024 12:00:00"></div>

Change the count from the date of the HTML code above. The format should be: Month Day, Year Hour:Minute:Second

Example: Counting up from 04 July 1776 12:00:00

Change the appearance of your count-up clock with CSS and make the clock ‘clickable’ by using the <a> element. See the example code below:

<a href="https://www.pitiya.com/" target="_blank"><div id="countuptimer" data-countup="Jan 1, 2024 12:00:00"></div></a>

Related: How to add a clickable countdown timer in emails (Pure HTML. No JS, CSS)

Final words on best website count up timers

Just like you would use counting down clocks in necessary parts of your website like checkout pages, count up timers are helpful on many occasions, such as showcasing the duration between the current time and a closed event like a summit, webinar, Zoom meeting, online competition, etc.,

Like always, do not overuse them, as they will dilute the trust in your brand.