Astro + Svelte Count-Up (Inline) — Complete Guide#

1
import { defineConfig } from 'astro/config';
2
import mdx from '@astrojs/mdx';
3

4
export default defineConfig({
5
  integrations: [mdx()],
6
});

1
<script lang="ts">
2
  import { onMount } from 'svelte';
3

4
  // Core
5
  export let start = 0;
6
  export let end = 0;
7
  export let duration = 1200;        // number & highlighter animation duration (ms)
8
  export let decimals = 0;
9
  export let locale: string | undefined = undefined;
10
  export let format: 'standard' | 'compact' = 'standard';
11

12
  // Display
13
  export let prefix = '';
14
  export let suffix = '';
15
  export let plus = false;
16

17
  // Accent styling
18
  export let color = '#ab8ae3';
19
  export let weight: number | string = 700;
20
  export let scale = 1.12;           // slightly larger than surrounding text
21

22
  // Highlighter
23
  export let highlight = false;
24
  export let highlightColor = 'rgba(171,138,227,0.25)';
25
  export let highlightRadius = '0.35em';
26
  export let highlightPadY = '0.12em';
27
  export let highlightPadX = '0.18em';
28

29
  const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
30
  let display = '';
31

32
  function formatNumber(n: number) {
33
    const opts: Intl.NumberFormatOptions =
34
      format === 'compact'
35
        ? { notation: 'compact', maximumFractionDigits: 1 }
36
        : { minimumFractionDigits: decimals, maximumFractionDigits: decimals };
37
    return n.toLocaleString(locale, opts);
38
  }
39

40
  function run() {
41
    const t0 = performance.now();
42
    const from = start, to = end;
43

44
    const tick = (now: number) => {
45
      const p = Math.min(1, (now - t0) / duration);
46
      const v = from + (to - from) * easeOutCubic(p);
47
      display = formatNumber(p < 1 ? v : to);
48
      if (p < 1) requestAnimationFrame(tick);
49
    };
50

51
    requestAnimationFrame(tick);
52
  }
53

54
  onMount(run);
55
</script>
56

57
<span
58
  class="countup"
59
  class:with-hl={highlight}
60
  style="
61
    --dur: {duration}ms;
62
    --scale: {scale};
63
    --color: {color};
64
    --weight: {weight};
65
    --hl-color: {highlightColor};
66
    --hl-radius: {highlightRadius};
67
    --pad-y: {highlightPadY};
68
    --pad-x: {highlightPadX};
69
  "
70
>
71
  {#if highlight}<span class="hl" aria-hidden="true"></span>{/if}
72
  <span class="txt">{prefix}{display}{plus ? '+' : ''}{suffix}</span>
73
</span>
74

75
<style>
76
  .countup {
77
    position: relative;
78
    display: inline-block;
79
    line-height: 1.1;
80
    font-size: calc(1em * var(--scale));
81
    color: var(--color);
82
    font-weight: var(--weight);
83
    vertical-align: baseline;
84
  }
85
  .countup .txt { position: relative; z-index: 1; }
86

87
  .countup.with-hl .hl {
88
    position: absolute;
89
    z-index: 0;
90
    left: calc(var(--pad-x) * -1);
91
    right: calc(var(--pad-x) * -1);
92
    top: calc(var(--pad-y) * -1);
93
    bottom: calc(var(--pad-y) * -1);
94
    border-radius: var(--hl-radius);
95
    background: var(--hl-color);
96
    transform: scaleX(0);
97
    transform-origin: left center;
98
    animation: sweep var(--dur) ease-out forwards;
99
  }
100

101
  @keyframes sweep { to { transform: scaleX(1); } }
102
</style>