Counters

<div class="uk-stats">
    <div class="uk-stat">
        <div class="uk-stat-value" data-count="12480">0</div>
        <div class="uk-stat-label">Total Users</div>
    </div>
    <div class="uk-stat">
        <div class="uk-stat-value" data-count="892">0</div>
        <div class="uk-stat-label">Projects</div>
    </div>
    <div class="uk-stat">
        <div class="uk-stat-value" data-count="99" data-suffix="%">0</div>
        <div class="uk-stat-label">Uptime</div>
    </div>
</div>

<style>
    .uk-stats {
        display: flex;
        gap: 2.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .uk-stat { text-align: center; }
    .uk-stat-value {
        font-size: 2.25rem;
        font-weight: 800;
        color: #1e3a8a;
        line-height: 1;
    }
    .uk-stat-label {
        font-size: 0.8rem;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-top: 0.35rem;
    }
</style>

<script>
    document.querySelectorAll('.uk-stat-value').forEach(el => {
        const target = +el.dataset.count;
        const suffix = el.dataset.suffix || '';
        const duration = 1400;
        const start = performance.now();

        function tick(now) {
            const t = Math.min((now - start) / duration, 1);
            const eased = 1 - Math.pow(1 - t, 3);
            el.textContent = Math.floor(eased * target).toLocaleString() + suffix;
            if (t < 1) requestAnimationFrame(tick);
        }
        requestAnimationFrame(tick);
    });
</script>

<div class="uk-kpi-card">
    <div class="uk-kpi-icon"><i class="fas fa-dollar-sign"></i></div>
    <div class="uk-kpi-info">
        <div class="uk-kpi-label">Revenue</div>
        <div class="uk-kpi-value">$48,290</div>
        <div class="uk-kpi-trend up">
            <i class="fas fa-arrow-up"></i> 12.5%
        </div>
    </div>
</div>

<style>
    .uk-kpi-card {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 0.85rem;
    }
    .uk-kpi-icon {
        width: 40px; height: 40px;
        border-radius: 0.6rem;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .uk-kpi-label {
        font-size: 0.72rem; color: #94a3b8;
        text-transform: uppercase; letter-spacing: 0.06em;
        font-weight: 600;
    }
    .uk-kpi-value {
        font-size: 1.35rem; font-weight: 800; color: #0b1b2f;
        margin: 2px 0 4px;
    }
    .uk-kpi-trend { font-size: 0.75rem; font-weight: 700; }
    .uk-kpi-trend.up   { color: #059669; }
    .uk-kpi-trend.down { color: #dc2626; }
</style>

<div style="text-align:center;">
    <div style="font-size:3.5rem;font-weight:900;color:#1e3a8a;">
        <span class="uk-stat-value" data-count="2500000">0</span>
    </div>
    <div style="color:#64748b;">Downloads worldwide</div>
</div>

<div class="uk-stats-row">
    <div class="uk-stat-cell">
        <div class="uk-stat-num" style="color:#1e3a8a;">2.4K</div>
        <div class="uk-stat-lbl">Stars</div>
    </div>
    <div class="uk-stat-divider"></div>
    <div class="uk-stat-cell">
        <div class="uk-stat-num" style="color:#059669;">18K</div>
        <div class="uk-stat-lbl">Forks</div>
    </div>
</div>

<style>
    .uk-stats-row {
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 1rem;
        background: #f8fafc;
        border-radius: 0.85rem;
    }
    .uk-stat-cell { text-align: center; flex: 1; }
    .uk-stat-num { font-size: 1.35rem; font-weight: 800; }
    .uk-stat-lbl {
        font-size: 0.72rem; color: #64748b;
        text-transform: uppercase; letter-spacing: 0.06em;
        font-weight: 600;
    }
    .uk-stat-divider {
        width: 1px; height: 32px;
        background: #e2e8f0;
    }
</style>

<div class="uk-circ-counter" style="--p:78;">
    <div class="uk-circ-counter-inner">
        <div class="uk-circ-counter-num">78%</div>
        <div class="uk-circ-counter-lbl">Complete</div>
    </div>
</div>

<style>
    .uk-circ-counter {
        --p: 78;
        --size: 140px;
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        background: conic-gradient(#1e3a8a calc(var(--p) * 1%), #e2e8f0 0);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .uk-circ-counter::before {
        content: '';
        position: absolute;
        inset: 10px;
        border-radius: 50%;
        background: #fff;
    }
    .uk-circ-counter-inner {
        position: relative;
        text-align: center;
    }
    .uk-circ-counter-num {
        font-size: 1.65rem;
        font-weight: 800;
        color: #1e3a8a;
        line-height: 1;
    }
    .uk-circ-counter-lbl {
        font-size: 0.7rem;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 600;
        margin-top: 2px;
    }
</style>

<div style="display:flex;gap:1rem;align-items:center;padding:1.25rem;background:#fff;border:1px solid #e2e8f0;border-radius:0.85rem;">
    <div style="width:56px;height:56px;border-radius:1rem;background:linear-gradient(135deg,#1e3a8a,#6366f1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;">
        <i class="fas fa-bolt"></i>
    </div>
    <div>
        <div style="font-size:1.75rem;font-weight:800;color:#0b1b2f;">87%</div>
        <div style="font-size:0.82rem;color:#64748b;">Faster load time</div>
    </div>
</div>