1.0.3 • Published 5 years ago
vanilla-counter v1.0.3
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>