skeleton
skeleton copied to clipboard
skeletonlabs
New Component: Timer
Here's a few examples of the visual UI. It needs to keep the minimalistic/flat design aesthetic of Skeleton, but personally I really like the "flip" panels like you might see at an airport or train station. Would be cool if we can combine those two ideas, but this is not a hard requirement.
Requirements:
- Should allow both counting down, as well as counting up
- Should support numeric values (ex: 1,000) and date/times
- We should avoid introducing third party libraries for this like Monument, etc. Keep it simple and self contained.
- It would be great to make use of Svelte transitions per each "tick" or change
Please review with me (here or on Discord) to discuss implementation details. I don't mind taking this one on myself!
Of course, follow our contribution guidelines when implementing any new components: https://skeleton.brainandbonesllc.com/docs/contributions
@endigo9740 @niktek is this one unassigned? would like to give it a shot this weekend if nobody is working on that
@benzara-tahar I've assigned this one to you. FYI the "requirements" above are just suggestions. This is one of those components that has a pretty niche use case, so honestly it's pretty open ended. Whatever you want to do with it should be fine. Thanks!
FYI after reviewing with @benzara-tahar we've decided to use his existing counter library found here:
- https://github.com/benzara-tahar/svelte-animated-counter
- Demo: https://svelte-animated-counter.vercel.app/
We'll create a new section on the Skeleton docs to house recommend tools like this one. I've also asked him to share any sort of sponsorship link has can provide so we can shout that out, along with his GitHub profile (similar to the Local Storage Store)
The location of this new "Recommendations" section is to be decided, but I'll be brainstorming this. May be something we can get in relatively quickly though.
New recommendations page added and including your library @benzara-tahar. Hopefully this works for you!
