Bento with Stats

Le code

Un aperçu du code source :

<div class="bento-container">
    <div class="bento-grid bento-stats" id="statsBento">
      <div class="bento-cell cell-1">
        <span class="stat-number" data-target="2847">0</span>
        <span class="stat-label">Utilisateurs actifs</span>
        <div class="stat-bar">
          <div class="stat-bar-fill" style="--fill-width: 95%;">
          </div>
        </div>
      </div>

Cas d'usage concrets

Quelques contextes où Bento with Stats fait mouche :

• Un annuaire d'équipe
• Une grille de produits e-commerce
• Un portfolio de projets

Comment ça marche

CSS + un petit script JavaScript vanilla (aucune dépendance). Il s'appuie sur animation @keyframes et transformations CSS (transform).

À personnaliser

Tu peux régler :

• 8 variables CSS pour ajuster couleurs, espacements et arrondis
• la vitesse d'animation (actuellement 1s)

Intégrer en 3 étapes

1. Colle le HTML dans ta page, à l'endroit où tu veux l'effet.
2. Ajoute le CSS à ta feuille de style (ou dans une balise <style>).
3. Ajoute le petit script JavaScript avant </body> — c'est prêt.

Compatibilité navigateur

Fonctionne sur tous les navigateurs modernes (Chrome, Firefox, Safari, Edge). Responsive, avec dégradation propre.

Plus d'effets Cartes

FAQ