https://github.com/yunisdev/vanilla-counter
Lightweight JS library to create counters
https://github.com/yunisdev/vanilla-counter
counter javascript vanilla-counter vanilla-javascript
Last synced: 3 days ago
JSON representation
Lightweight JS library to create counters
- Host: GitHub
- URL: https://github.com/yunisdev/vanilla-counter
- Owner: yunisdev
- License: mit
- Created: 2021-01-08T06:32:22.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-01-08T07:54:07.000Z (over 5 years ago)
- Last Synced: 2025-07-01T09:07:39.723Z (12 months ago)
- Topics: counter, javascript, vanilla-counter, vanilla-javascript
- Language: JavaScript
- Homepage: https://yunisdev.github.io/vanilla-counter/
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Vanilla Counter
Lightweight JS library to create counters.
### Installation
Add `vanilla-counter` to `head` tag:
```html
```
### Usage
First create a element with `data-vanilla-counter` attribute. This attribute will help `vanilla-counter` to recognize elements.
```html
```
You can also add following attributes:
| Attribute | Default | Optional | Details |
| --------: | ------: | ----------: | -------: |
| data-start-at | -- | `false` | Where to start count |
| data-end-at | -- | `false` | Where to end count |
| data-delay | 0 | `true` | Delay on animation start |
| data-time | 1000 | `true` | Time length of animation |
| data-format | {} | `true` | Counter will replace `{}` with number. Ex: `{}%` will be rendered as `100%`. **Note: You can not add any character or space inside curly braces, otherwise it will not work.**
Example,
```html
```
You can also use inner html for format. Example:
```html
{}%
```
But remember that `data-format` way is first case. So, if you use both methods, counter will get `data-format` value.
#### Initialize
After adding elements, don't forget to initialize.
```html
VanillaCounter();
```