@layflags/rolling-number

1.0.0 • Public • Published

<layflags-rolling-number>

This easy-to-use inline Web Component shows a nice rolling digit animation and automatically adapts to the surrounding font style.

Rolling Number Screen Recording

See a DEMO here: https://layflags.github.io/rolling-number/

This project makes use of the latest browser features (Web Components, module scripts, CSS variables, etc.) which are well supported in current versions of Google Chrome, Mozilla Firefox, Apple Safari and Microsoft Edge. If you need to target older browser versions or Microsoft Internet Explorer, you need to provide appropriate polyfills.

Installation

Self hosted

Add the following to an HTML document:

<script type="module" src="path/to/rolling-number.js"></script>

CDN

Add the following to an HTML document:

<script
  type="module"
  src="https://unpkg.com/@layflags/rolling-number@1.0.0/rolling-number.js"
></script>

NPM

Run npm i @layflags/rolling-number.

Usage

<!-- value by fallback -->
<layflags-rolling-number>123</layflags-rolling-number>

<!-- value w/o fallback -->
<layflags-rolling-number value="123"></layflags-rolling-number>

<!-- customize roll duration -->
<layflags-rolling-number
  style="--roll-duration:750ms"
  value="123"
></layflags-rolling-number>

License

MIT License

Package Sidebar

Install

npm i @layflags/rolling-number

Weekly Downloads

669

Version

1.0.0

License

MIT

Unpacked Size

8.28 kB

Total Files

4

Last publish

Collaborators

  • layflags