vanilla-counter
v1.0.3
Published
Lightweight JS library to create counters
Downloads
2,291
Maintainers
Readme
Vanilla Counter
Lightweight JS library to create counters.
Installation
Add vanilla-counter
to head
tag:
<head>
<script src="https://unpkg.com/vanilla-counter"></script>
</head>
Usage
First create a element with data-vanilla-counter
attribute. This attribute will help vanilla-counter
to recognize elements.
<span data-vanilla-counter></span>
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,
<span
data-vanilla-counter
data-start-at="0"
data-end-at="100"
data-time="10000"
data-delay="0"
data-format="{}%"
> </span>
You can also use inner html for format. Example:
<span
data-vanilla-counter
data-start-at="0"
data-end-at="100"
data-time="10000"
data-delay="0"
>{}%</span>
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.
<body>
<!-- ... -->
<script>
VanillaCounter();
</script>
</body>