Line

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

Line is the web's most advanced progress bar plugin. It's easy to setup, amazingly flexible and ships with beautiful animation presets.

Whether you want to visualize the duration till a certain date, show upload progress or donation totals, Line has got your use case covered.

Features:

Works standalone but ships with handy wrapper for jQuery.

Buy Line Counter Now

Presets

The Line 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 Line.

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. Line is used to draw circular progress indicators for each time segement.

Learn more about counting down

upload progress

Numerical values can also be outputted with Line. Here we render a percentage based on file upload progress. Note the use of a gradient instead of an opaque color.

Learn about gradients

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

Learn about scheduling

Use custom fonts to make your counters stand out. In this example we use a glow setting to make bright, glowwy, white progress indicators.

Learn about value transforms

Counters can be individually styled, each counter has it's own color values. As you can see animation is not required.

Learn more about line counter

Counter shows the current time by mimicing the Apple Watch. Value updates to the progress indicators are animated with the arrive transform.

Learn more about transforms
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

Progress bars can also oriented vertically. We can also use easing animations to animate the progress updates.

Learn more about easing
Donated
Completed

A counter that renders a total donated value using the number transform. By using a progress bar we can nicely illustrate the distance to our goal.

Learn more about line

Labels can be all translated to your liking.

Learn more about line

Feature Overview

Animated Progress Indicators

The Line view renders beautifully animated horizontal, vertical and circular progress bars.

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="50">

</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 "line" progress counter.

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

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

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

</div>

Strange, it does not show the set progress. Maybe it's too small? We'll replace the span element with a div to make it stretch the entire width of the demo.

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

    <div data-view="line"></div>

</div>

That was not it.

We don't see anything because "line" does not know the maximum value and therefor cannot determine what progress to show. We have to feed line a a value between 0 and 1, where 0 is empty and 1 is full.

We can do this by telling it the maximum value. We'll add a transform that calculates the value between 0 and 1 for a value in a certain range (in this case 0 and 100).

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

    <div data-view="line" data-transform="fraction(0,100)"></div>

</div>

There we go!

Let's update our counter each second so we can see the progress bar fill up. We'll do this by binding a function to the data-did-init callback. And we'll limit it's value to a 100.

We'll also add a nice animation using the spring transform.

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

    <div data-view="line" data-transform="fraction(0,100) -> spring"></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
        if (tick.value < 100) {
            tick.value += 5;
        }
        else {
            tick.value = 0;
        }

    });

}
</script>

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

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