A lightweight animated counter component for Angular, React, and Vanilla JavaScript.
Perfect for dashboards, statistics, analytics, and engaging UI counters.
Easily add step-based counting with customizable inputs: start, end, step, and timer.
- ⚡ Lightweight and fast
- 🧩 Works with Angular
- ⚛️ Works with React
- 🌐 Works with Vanilla JavaScript
- 🔧 Fully customizable
- 🎯 Easy to integrate
Install the package using npm.
npm install @nawazaideveloperr/counter-pluginimport { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CounterModule } from '@nawazaideveloperr/counter-plugin';
@NgModule({
imports: [
BrowserModule,
CounterModule
]
})
export class AppModule {}<lib-counter
[start]="0"
[end]="1000"
[timer]="2000"
[step]="2">
</lib-counter>For latest Angular versions you can import the module directly inside the component.
import { CounterModule } from '@nawazaideveloperr/counter-plugin';import React from "react";
import { Counter } from "@nawazaideveloperr/counter-plugin";
function App() {
return (
<div>
<h1>Visitors</h1>
<Counter
start={0}
end={500}
timer={1500}
step={5}
/>
</div>
);
}
export default App;<!DOCTYPE html>
<html>
<head>
<title>Counter Demo</title>
<script src="node_modules/@nawazaideveloperr/counter-plugin/dist/counter-plugin.umd.js"></script>
</head>
<body>
<h1 id="counter"></h1>
<script>
const counter = new Counter({
element: document.getElementById("counter"),
start: 0,
end: 300,
timer: 2000,
step: 10
});
counter.start();
</script>
</body>
</html>| Prop | Type | Default | Description |
|---|---|---|---|
| start | number | 0 | Starting number of the counter |
| end | number | 1000 | Ending number of the counter |
| timer | number | 1000 | Animation duration in milliseconds |
| step | number | 5 | Increment step size |
<lib-counter
[start]="100"
[end]="2000"
[timer]="3000"
[step]="10">
</lib-counter>- Dashboard statistics
- Visitor counters
- Sales analytics
- Animated UI metrics
- Growth numbers
MIT License @https://github.com/devloper2017/
If you like this project, please star the repository on GitHub.
Click here to ⭐ star the repository
Pull requests are welcome.
If you find a bug or want to improve the plugin, feel free to open an issue.