Lightweight JS Library For Creating Counters In Vanilla JavaScript

Vanilla Counter is an easy and small counter JavaScript library that can be used to count or count a given number.

javascript increment counter, counter in javascript example, dynamic counter javascript, page load counter javascript, javascript counter button, auto counter in javascript

How to make use of it:

1. Import the vanilla-counter.js JavaScript library into your HTML doc.

<script src="vanilla-counter.js"></script>

2. Create a counter that counts from zero to your required quantity.

<span data-vanilla-counter 
       data-start-at="0"
       data-end-at="100">
       {}
 </span>

3. Create a counter that counts down from a given quantity.

<span data-vanilla-counter 
      data-start-at="100" 
      data-end-at="0">
      {}
</span>

4. Add a prefix or suffix to the counter.

<span data-vanilla-counter 
      data-start-at="0" 
      data-end-at="100"
      data-format="{}%">
      {}
</span>

5. Determine the time to attend earlier than beginning the counter.

<span data-vanilla-counter 
      data-start-at="0" 
      data-end-at="100"
      data-delay="1000">
      {}
</span>

6. Determine the length in milliseconds.

<span data-vanilla-counter 
      data-start-at="0" 
      data-end-at="100"
      data-time="1000">
      {}
</span>

7. Initialize the counter and finished.

VanillaCounter();

Easy Customizable Counter, Vanilla Counter Plugin/Github


See Demo And Download

Official Website(YunisDEV): Click Here

This superior jQuery/javascript plugin is developed by YunisDEV. For extra Advanced Usages, please go to the official website.

Related Posts

Iconpicker-Bootstrap-5

[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-based icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[fontawesome.com], etc. Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons How…

bootstrap-multiple-image-upload-with-preview

Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server. Must Read: HTML 5…

Animating-Split-Flap-Displays-fallblatt

A Lightweight jQuery Plugin for Animating Split-Flap Displays | fallblatt

fallblatt is a lightweight jQuery plugin for animating split screens. This jQuery plugin allows you to include such offers in your web application. Everything from virtual departure…

bootstrap-5-dark-theme

Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…

jQuery-SyoTimer-Plugin

jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization. Features Periodic count with the specified period…

vue-js-periodic-table

Dynamic, Data-driven Periodic Table built with Vue.js

Periodicity is a dynamic, data-driven periodic table created with Vue.js that uses D3 animations and graphs to show the beauty of periodic trends. Built With vue.js (component…