https://github.com/layflags/rolling-number

<layflags-rolling-number> is an easy-to-use inline Web Component that shows a nice rolling digit animation and automatically adapts to the surrounding font style
https://github.com/layflags/rolling-number

webcomponents

Last synced: 12 days ago
JSON representation

<layflags-rolling-number> is an easy-to-use inline Web Component that shows a nice rolling digit animation and automatically adapts to the surrounding font style

• Host: GitHub
• URL: https://github.com/layflags/rolling-number
• Owner: layflags
• License: mit
• Created: 2021-09-17T09:31:12.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-07-10T14:53:40.000Z (4 months ago)
• Last Synced: 2024-10-12T16:51:29.331Z (26 days ago)
• Topics: webcomponents
• Language: HTML
• Homepage: https://layflags.github.io/rolling-number/
• Size: 163 KB
• Stars: 12
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


# <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](rolling-number.gif)

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

This project makes use of the latest browser features ([Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components), [module scripts](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), etc.) which are well supported in current versions of [Google Chrome](https://www.google.com/chrome/), [Mozilla Firefox](https://www.mozilla.org/en-US/firefox/new/), [Apple Safari](https://www.apple.com/safari/) and [Microsoft Edge](https://www.microsoft.com/en-us/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:

```html

```

### CDN

Add the following to an HTML document:

```html

```

### [NPM](https://www.npmjs.com/package/@layflags/rolling-number)

Run `npm i @layflags/rolling-number`.

## Usage

```html

123

```

## License

[MIT License](LICENSE)