3 Best Count Up Timer Widgets to Use Free in 2022

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

Powr

powr-count-up-timer-editor

Powr is an online service that provides 50+ small widgets for websites. Social Feed, Pricing Table maker, FAQ, Contact Form, Popup, PayPal Button, and email countdown timer are some of them.

Its website countdown 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 and 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 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.

install-powr-website-countdown-code
Installation Options

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 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-countdown-timer-plugin-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-countup-clock-editor

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 and it comes with 1,000,000 counter views and more features such as the removal of 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 of 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, 2022 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, 2022 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 in 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.

count up timer widgets

Leave a Comment

0 Shares
Share via
Copy link