Getting Started

Note

TimeredCounter currently has two optional dependencies. Considering their large size, they are not installed by default. You can manually install them as needed.

• decimal.js: Decimal.js provides almost unlimited precision for handling large numbers/high-precision floating-point calculations. How to use ->
• grapheme-splitter: grapheme-splitter can correctly split strings containing emojis. How to use ->

In each usage method below, we will provide instructions on how to install these two dependencies.

Import via CDN

You can use TimeredCounter directly via CDN with the <script> tag:

<script src="https://cdn.jsdelivr.net/npm/timered-counter/dist/timered-counter.global.js"></script>

Here we use jsdelivr, but you can also use any CDN that provides npm packages, such as unpkg or cdnjs. Of course, you can also download this file and serve it yourself.

Using TimeredCounter via CDN does not involve a "build step". This makes setup simpler and can be used to enhance static HTML.

Using Global Build Version

The above link uses the global build version of TimeredCounter, where all top-level APIs are exposed as properties on the global TimeredCounter object. Here is an example of using the global build version:

...
<script src="https://cdn.jsdelivr.net/npm/timered-counter/dist/timered-counter.global.js"></script>

<div style="font-size: 36px; text-align: center;">
  <timered-counter-string value="123456789" initial-value="0"></timered-counter-string>
</div>

Optional Dependencies

Add decimal.js Number Adapter

If you need to use the decimal.js based number adapter, please add the following <script> tag first:

<script src="https://cdn.jsdelivr.net/npm/timered-counter/dist/decimal-js-number-adapter.global.js"></script>

Then import it in your code:

TimeredCounter.TimeredCounterAdapter.registryAdapter(TimeredCounterExternal.DecimalJsNumberAdapter); // Register adapter
TimeredCounter.TimeredCounterAdapter.setNumberAdapter('decimal.js'); // Set the adapter to use

Add grapheme-splitter String Adapter

If you need to use the grapheme-splitter based string adapter, please add the following <script> tag first:

<script src="https://cdn.jsdelivr.net/npm/timered-counter/dist/grapheme-splitter-string-adapter.global.js"></script>

Then import it in your code:

TimeredCounter.TimeredCounterAdapter.registryAdapter(TimeredCounterExternal.GraphemeSplitterAdapter); // Register adapter
TimeredCounter.TimeredCounterAdapter.setStringAdapter('grapheme-splitter'); // Set the adapter to use

File Size

File Name	raw	gzip	brotli	deflate
timered-counter.global.js	68.93 kB	19.9 kB	17.63 kB	19.89 kB
decimal-js-number-adapter.global.js	33.1 kB	13.4 kB	11.69 kB	13.39 kB
grapheme-splitter-string-adapter.global.js	23.87 kB	7.8 kB	4.92 kB	7.79 kB

Using ES Module Build Version

In the rest of this document, we mainly use ES module syntax. Most modern browsers natively support ES modules. Therefore, we can use TimeredCounter via CDN and native ES modules like this:

...
<script type="module" src="https://cdn.jsdelivr.net/npm/timered-counter/dist/timered-counter.esm-browser.js"></script>

<div id="demo" style="font-size: 36px; text-align: center;">
  <timered-counter-string value="123456789" initial-value="0"></timered-counter-string>
</div>

Note that we use <script type="module">, and the imported CDN URL points to the ES module build version of TimeredCounter.

Optional Dependencies

Add decimal.js Number Adapter

If you need to use the decimal.js based number adapter, please modify the code as follows:

<script src="https://cdn.jsdelivr.net/npm/timered-counter/dist/decimal-js-number-adapter.esm-browser.js"></script> 

<script type="module">
  import { TimeredCounterAdapter } from 'https://cdn.jsdelivr.net/npm/timered-counter/dist/timered-counter.esm-browser.js'; 
  import DecimalJsNumberAdapter from 'https://cdn.jsdelivr.net/npm/timered-counter/dist/decimal-js-number-adapter.esm-browser.js'; 
  TimeredCounterAdapter.registryAdapter(DecimalJsNumberAdapter); 
  TimeredCounterAdapter.setNumberAdapter('decimal.js'); 
</script>

Add grapheme-splitter String Adapter

If you need to use the grapheme-splitter based string adapter, please modify the code as follows:

<script src="https://cdn.jsdelivr.net/npm/timered-counter/dist/decimal-js-number-adapter.esm-browser.js"></script> 

<script type="module">
  import { TimeredCounterAdapter } from 'https://cdn.jsdelivr.net/npm/timered-counter/dist/timered-counter.esm-browser.js'; 
  import GraphemeSplitterStringAdapter from 'https://cdn.jsdelivr.net/npm/timered-counter/dist/grapheme-splitter-string-adapter.esm-browser.js'; 
  TimeredCounterAdapter.registryAdapter(GraphemeSplitterStringAdapter); 
  TimeredCounterAdapter.setStringAdapter('grapheme-splitter'); 
</script>

File Size

File Name	raw	gzip	brotli	deflate
timered-counter.esm-browser.js	67.51 kB	19.79 kB	17.56 kB	19.78 kB
decimal-js-number-adapter.esm-browser.js	32.74 kB	13.29 kB	11.58 kB	13.28 kB
grapheme-splitter-string-adapter.esm-browser.js	23.51 kB	7.66 kB	4.76 kB	7.65 kB

Import via Module

Installation

npm

$ npm install timered-counter --save

pnpm

$ pnpm add timered-counter

yarn

$ yarn add timered-counter

Import

import "timered-counter";

Optional Dependencies

Install decimal.js Number Adapter

If you need to use the decimal.js based number adapter, please install it first:

npm install decimal.js --save

Then import it in your code:

import DecimalJsAdapter from "timered-counter/dist/src/number-adapter/decimal.js";
import { TimeredCounterAdapter } from "timered-counter";

TimeredCounterAdapter.registryAdapter(DecimalJsAdapter); // Register adapter
TimeredCounterAdapter.setNumberAdapter('decimal.js'); // Set the adapter to use

Install grapheme-splitter String Adapter

If you need to use the grapheme-splitter based string adapter, please install it first:

npm install grapheme-splitter --save

Then import it in your code:

import GraphemeSplitterAdapter from "timered-counter/dist/src/string-adapter/grapheme-splitter.js";
import { TimeredCounterAdapter } from "timered-counter";

TimeredCounterAdapter.registryAdapter(GraphemeSplitterAdapter); // Register adapter
TimeredCounterAdapter.setStringAdapter('grapheme-splitter'); // Set the adapter to use

Usage

You only need to update the value, and TimeredCounter will handle the rest automatically.

`TimeredCounter` is like this, you just need to update the value, but `TimeredCounter` has to consider a lot of things. XD

Below is a simple example where TimeredCounter will automatically respond to changes in the number and handle the increment/decrement animation.

Getting Started

---

---

HTML

<timered-counter-number
  id="counter"
  class="font-mono font-bold self-center"
/>

JS

let userCount = 1000;
const counter = document.getElementById('counter');
setInterval(() => {
  userCount += Math.floor(Math.random() * 10);
  counter.value = userCount;
}, 1100);

All

<script setup lang="ts">
import { onMounted } from "vue";
onMounted(() => {
// #region js
  let userCount = 1000;
  const counter = document.getElementById('counter');
  setInterval(() => {
    userCount += Math.floor(Math.random() * 10);
    counter.value = userCount;
  }, 1100);
// #endregion js
});
</script>

<template>
<!-- #region html -->
  <timered-counter-number
    id="counter"
    class="font-mono font-bold self-center"
  />
<!-- #endregion html -->
</template>

<style scoped></style>

Next

• Want to see more examples of TimeredCounter? Check out Examples.
• Want to learn about TimeredCounter configuration parameters? Check out Configuration and API.
• Want to explore more possibilities of TimeredCounter styles and animations, such as achieving this effect? You can start from In-depth TimeredCounter.