42 lines
694 B
Svelte
42 lines
694 B
Svelte
<script lang="ts">
|
|
import { cubicOut } from 'svelte/easing';
|
|
import { tweened } from 'svelte/motion';
|
|
|
|
const { value, children }: { value: number; children: unknown } = $props();
|
|
|
|
const t_value = tweened(0, {
|
|
duration: 300,
|
|
easing: cubicOut
|
|
});
|
|
|
|
$effect(() => {
|
|
t_value.set(value);
|
|
});
|
|
</script>
|
|
|
|
<div class="counter">
|
|
<div class="number">
|
|
{Math.floor($t_value)}
|
|
</div>
|
|
<div class="description">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.counter {
|
|
width: 150px;
|
|
height: 150px;
|
|
box-shadow: 1px 1px 8px 2px #33333333;
|
|
border-radius: 30px;
|
|
padding: 20px;
|
|
margin: 0 10px;
|
|
text-align: center;
|
|
|
|
.number {
|
|
font-family: 'Bebas Neue';
|
|
font-size: 50px;
|
|
}
|
|
}
|
|
</style>
|