svelte-counter

A simple css-agnostic count-up component for Svelte 3.

Installation 🔧

First you need a Svelte 3 project. Its starter template lives at https://github.com/sveltejs/template.

Then install the component by running the following command in your project's directory:

npm install svelte-counter

How to use 🚀

1. First import the component on your svelte page's script section.

import Counter from 'svelte-counter';

1. Declare your counter variables as one object like so (again in the script section):

export let counters = {
    'coffees'	: 88,
    'hours' : 1600,
    'lines' : 6132,
    'clients'	: 22
}

You can use anything valid you like for variable & key names, it doesn't matter!

1. Call the component where you want it to be placed e.g.:

<Counter values={counters} duration="5000" random="false" minspeed="200" let:counterResult>
    <div>{counterResult.coffees} cups of coffee drunk</div>
    <div>{counterResult.hours} hours worked</div>
    <div>{counterResult.lines} lines of code written</div>
    <div>{counterResult.clients} happy customers</div>
</Counter>

In the slot space between <Counter></Counter> you can write your template however you like. Use the same keys you declared above for the counterResult object in your template.

I recommend not to change the "counterResult" object name. If you need to you can do it like so:

let:yourvariable="counterResult"

Configuration Options

All the following options are optional:

Name	Default	Description
duration	5000	Effect duration in milliseconds
random	false	Randomize the counting (might go even backwards)
minspeed	20	The fastest it will tick in milliseconds, larger means slower

Missing ❌

• Decimals support - Could do it but most people only want integer counters. Will update upon request.
• Tests - It's pretty straight forward but feel free to contribute.
• Demo Page - Will do.

Contribution 🖇️

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

Authors ✒️

• ** John Rallis ** - * Initial Work * - rallisf1

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.

Expressions of Gratitude 🎁

• Tell others about this project 📢
• Buy me a beer 🍺 or coffee ☕ | ₿ Crypto |💰 Cash
• Publicly thanks 🤓

---

⌨️ with ❤️ by rallisf1 😊