web-component-number-animation

web-component-number-animation

This is a web component that allows you to create numerical animations on your website.

Features

• 🌀 Works with any framework or no framework at all.
• 🍃 Lightweight and easy to use. (only <2kb gzipped)
• ⚙️ Support multiple attribute configurations including digital formatting, transition duration, etc.

Demo

Usage

Installation

pnpm i web-component-number-animation   # or npm or yarn

Registration and Usage

import { NumberAnimation } from 'web-component-number-animation';
customElements.define('x-number-animation', NumberAnimation);

<x-number-animation to="12345.6789" />

Using package via CDN

Using ES Module

<script type="module">
  import { NumberAnimation } from 'https://www.unpkg.com/web-component-number-animation/dist/number-animation.js';
  customElements.define('x-number-animation', NumberAnimation);
</script>

<x-number-animation to="12345.6789" />

Configurations

You can customize the behavior of the NumberAnimation component using the following props:

interface Props {
  to: number;
  from?: number;
  precision?: number;
  duration?: number;
  locale?: string;
  disabled?: boolean;
  hideSeparator?: boolean;
}