A tiny css-agnostic animated counter for Svelte
npm (or any other package manager)
npm install -D @benzara/svelte-animated-counter- No dependencies
- CSS agnostic (custom styling)
- less than 1Kb minified
- works for svelte and svelte-kit
- Customisable (see options below)
- First import the component on your svelte page's script section.
import { AnimatedCounter } from '@benzara/svelte-animated-counter';- Call the component where you want it to be placed e.g.:
<AnimatedCounter
values={Array.from({ length: 122 }, (_, i) => (1900 + i).toString())}
class="custom-counter"
interval={1000}
startImmediately={false}
direction="down"
loop={true}
ease="cubic-bezier(0.25, 0.1, 0.25, 1)"
initialValue="2008"
/>| Name | Default | Description |
|---|---|---|
| values | ['000',..., '100'] |
list of values to animate |
| interval | 1000 |
counter interval between each step in milliseconds, defaults to 1000 |
| startImmediately | false |
whether to start the counter immediately or wait for the interval to pass, defaults to false |
| direction | 'down' | counter direction, can be up or down defaults to down |
| loop | true |
whether to loop the counter animation after reaching the end of values array , defaults to true |
| ease | cubic-bezier(1, 0, 0, 1) |
easing function to use, defaults to cubic-bezier(1, 0, 0, 1) |
| initialValue | undefined |
optional initial value to start the counter from. If not provided, initialValue will be the first item in the values array if direction === "up", or the last item otherwise |
Feel free to fork. If you find a bug or got something great to add make a pull request!
Benzara Tahar Benlahcene benzara-tahar
You can also look at the list of all the contributors who have participated in this project.
This project is free to use, edit & distribute under the MIT License.
⌨️ with ❤️ by benzara-tahar 😊