Alpha Counter

Customizable counters, progress circles, and countdown.
Check out this Demo to see them in action!

Counter Usage

HTML markup for counter:

<span class="counter">99</span>

Simple initialization:

new Counter({ node: document.querySelector( '.counter' ) });

or with all options:

var counter = new Counter({
    node:       document.querySelector( '.counter' ),
    from:       10,
    to:         50,
    duration:   1000,
    refresh:    30,
    formatter:  function ( value ) { return value + '%'; },
    onStart:    function ( value ) { console.log( value ); },
    onUpdate:   function ( value ) { console.log( value ); },
    onComplete: function ( value ) { console.log( value ); }
});

Counter API

new Counter( options )

Initializes the counter and returns its instance.

options

Type: Object
Required

node

Type: Element object
Required
The element that is changed by the counter.

from

Type: Number
Default: 0
The number from which the count begins.

to

Type: Number
The number, with which the count ends. If the parameter is not specified, the counter will try to get it from the element. Otherwise, an error is thrown.

duration

Type: Number
Default: 3000
Сounting duration in milliseconds.

refresh

Type: Number
Default: 30
Counter element render interval in milliseconds.

formatter( value )

Type: Function
A callback function that serves as a counter value formatter. Must return a modified counter value (for example, added prefix). The counter instance serves as the context.

onStart( value )

Type: Function
Callback function that is executed before the count starts. The counter instance serves as the context. The counter value serves as a parameter.

onUpdate( value )

Type: Function
Callback function that is executed on each counter refresh. The counter instance serves as the context. The counter value serves as a parameter.

onComplete( value )

Type: Function
Callback function that is executed when counting is complete. The counter instance serves as the context. The counter value serves as a parameter.

ProgressCircle Usage

ProgressCircle requires at least one SVG element with a clipped class.

HTML markup for progress circle:

<svg class="progress-circle" x="0px" y="0px" width="100" height="100" viewbox="0 0 100 100">
    <circle class="clipped" cx="50" cy="50" r="50"></circle>
</svg>

Simple initialization:

new ProgressCircle({ node: document.querySelector( '.progress-circle' ) });

or with all options:

var progressCircle = new ProgressCircle({
    node:    document.querySelector( '.progress-circle' ),
    clipped: '.clipped',
    clipId:  'MyAwesomeId',
    angle:   45
});

ProgressCircle API

new ProgressCircle( options )

Initializes the SVG progress circle and returns its instance.

options

Type: Object
Required

node

Type: Element object
Required
The SVG element that is processed by the aProgressCircle instance.

clipped

Type: String
Default: '.clipped'
The selector of the SVG element to be clipped depending on the progress angle.

clipId

Type: String
Default: random eight-character string
ID of the generated <clipPath> element.

angle

Type: Number
Default: 0
Angle of circle progress (from 0 to 360 degrees inclusive).

Countdown Usage

Requires exactly 4 elements with attributes data-counter-days, data-counter-hours, data-counter-minutes, data-counter-seconds and exactly 4 svg-elements with attributes data-progress-days, data-progress-hours, data-progress-minutes, data-progress-seconds.
The latter must satisfy the conditions of the ProgressCircle. Just use and modify basic markup =)

HTML markup for countdown:

<div class="countdown">
  <div class="countdown-block">
    <svg class="countdown-circle" x="0px" y="0px" width="100px" height="100px" viewbox="0 0 100 100" data-progress-days>
      <circle class="clipped" cx="50" cy="50" r="50" ></circle>
    </svg>
    <h1 class="countdown-counter" data-counter-days>00</h1>
  </div>
  <div class="countdown-block">
    <svg class="countdown-circle" x="0px" y="0px" width="100px" height="100px" viewbox="0 0 100 100" data-progress-hours>
      <circle class="clipped" cx="50" cy="50" r="50" ></circle>
    </svg>
    <h1 class="countdown-counter" data-counter-hours>00</h1>
  </div>
  <div class="countdown-block">
    <svg class="countdown-circle" x="0px" y="0px" width="100px" height="100px" viewbox="0 0 100 100" data-progress-minutes>
      <circle class="clipped" cx="50" cy="50" r="50" ></circle>
    </svg>
    <h1 class="countdown-counter" data-counter-minutes>00</h1>
  </div>
  <div class="countdown-block">
    <svg class="countdown-circle" x="0px" y="0px" width="100px" height="100px" viewbox="0 0 100 100" data-progress-seconds>
      <circle class="clipped" cx="50" cy="50" r="50" ></circle>
    </svg>
    <h1 class="countdown-counter" data-counter-seconds="">00</h1>
  </div>
</div>

Some basic styles:

.countdown {
    display: flex;
    justify-content: center;
    text-align: center;
}

Simple initialization:

new Countdown({
    node: document.querySelector( '.countdown' ),
    to:   '2019-09-20'
});

or with all options:

var countdown = new Countdown({
    node:   document.querySelector( '.countdown' ),
    from:   '2017-08-19',
    to:     '2019-09-20',
    count:  'auto',
    tick:   100,
    onTick: function() { console.log( this ); }
});

Countdown API

new Countdown( options )

Initializes the countdown and returns its instance.

options

Type: Object
Required

node

Type: Element object
Required
The main element that is processed by the aCountdown instance.

from

Type: String
Countdown start date. Must be in valid format.

to

Type: String
Required
Countdown end date. Must be in valid format.

count

Type: String
Default: 'auto'
Count mode: 'until', 'since' or 'auto'.

tick

Type: Number
Default: 1000
Countdown render interval in milliseconds.

onTick

Type: Function
Callback function that is executed on each countdown render. The countdown instance serves as the context.

License

Licensed under CC BY-SA 4.0