Skip to content

benzara-tahar/svelte-animated-counter

Repository files navigation

svelte-animated-counter

A tiny css-agnostic animated counter for Svelte

Installation 🔧

npm (or any other package manager)

npm install -D @benzara/svelte-animated-counter

Features ✨

  • No dependencies
  • CSS agnostic (custom styling)
  • less than 1Kb minified
  • works for svelte and svelte-kit
  • Customisable (see options below)

How to use 🚀

  1. First import the component on your svelte page's script section.
import { AnimatedCounter } from '@benzara/svelte-animated-counter';
  1. 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"
/>

Configuration Options

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

Contribution 🖇️

Feel free to fork. If you find a bug or got something great to add make a pull request!

Authors ✒️

Benzara Tahar Benlahcene benzara-tahar

You can also look at the list of all the contributors who have participated in this project.

License 📄

This project is free to use, edit & distribute under the MIT License.


⌨️ with ❤️ by benzara-tahar 😊