Skip to content

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

License

Notifications You must be signed in to change notification settings

rallisf1/svelte-counter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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: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 😊

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published