search

yunisdev / vanilla-counter

Lightweight JS library to create counters
https://yunisdev.github.io/vanilla-counter/
MIT License
0 stars 1 forks source link
counter javascript vanilla-counter vanilla-javascript

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>