A simple css-agnostic count-up component for Svelte 3.
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- First import the component on your svelte page's script section.
import Counter from 'svelte-counter';- 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!
- 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}
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 |
- 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.
Feel free to fork. If you find a bug or got something great to add make a pull request!
- ** John Rallis ** - * Initial Work * - rallisf1
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 rallisf1 😊