animated-numbers

A lean package for displaying animated numbers.

Installation

You can install the package via yarn or npm:

yarn add animated-numbers

npm install animated-numbers --save

Usage

Javascript

Import the package:

import 'animated-numbers';

You can also import the compiled code for standalone use via the <script> tag:

<script type="text/javascript" src="../dist/animated-numbers.js"></script>

HTML

Include the following HTML snippet where you intend to animate numbers:

<div class="animated-number">
    <div class="animated-number_number">
        <span class="animated-number_number_nr">100</span>
        <span class="animated-number_number_unit">%</span>
    </div>
    <div class="animated-number_text">lorem ipsum</div>
</div>

Compile source

• Run npm run build to compile source code for a one-time build.
• Or, start an HMR-supporting development server via npm run dev-server