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';

2. 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!

3. 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:counterResult={yourvariable}

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 😊