Data Visualization & Graphiques
Data viz, compteurs animés, graphiques et effets data-driven.
Mis à jour le
Comment animer des graphiques et des chiffres sans bibliothèque ?
Les petites visualisations de données, compteurs, anneaux de progression, graphiques en barres ou en courbes, se dessinent avec HTML, CSS et SVG seuls. Les barres grandissent avec une transformation CSS, les anneaux et les courbes animent stroke-dashoffset en SVG, et les compteurs s'incrémentent en JavaScript quand ils entrent à l'écran, détectés par IntersectionObserver.
Comment choisir, performances et accessibilité
- Utilisez Animated Counter ou Stat Cards pour les chiffres clés d'une page d'accueil, Progress Ring ou Gauge Meter pour un taux d'avancement, et Line Chart Draw ou Sparkline pour les tendances d'un tableau de bord.
- Laissez la valeur finale dans le HTML pour qu'elle soit juste sans animation et lue par les lecteurs d'écran, nommez les axes et les unités, et passez à une bibliothèque de graphiques seulement pour le zoom, des infobulles nombreuses ou des données en direct.
- Animated Counter est gratuit avec son code complet ; les autres sont inclus dans Premium.
Animated Counter
Compteur qui s'anime vers la valeur cible.
Voir le code source
<div class="demo-preview">
<div class="counter-container">
<span class="counter-value" data-target="8547">0</span>
<span class="counter-label">Utilisateurs actifs</span>
</div>
</div>.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
box-sizing: border-box
}
.demo-preview {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
background: rgb(26, 26, 36);
color: rgb(255, 255, 255);
font-family: sans-serif;
}
.counter-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.counter-value {
font-size: 3rem;
font-weight: 800;
background: linear-gradient(135deg, #6366f1, #d946ef);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.counter-label {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: 2px;
}(function() {
function animateCounter(element, target, duration = 2000, isDecimal = false) {
const start = 0;
const startTime = performance.now();
function update(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
// Easing function (ease-out cubic)
const easeProgress = 1 - Math.pow(1 - progress, 3);
const current = start + (target - start) * easeProgress;
if (isDecimal) {
element.textContent = current.toFixed(1);
} else {
element.textContent = Math.floor(current).toLocaleString();
}
if (progress < 1) {
requestAnimationFrame(update);
} else {
if (isDecimal) {
element.textContent = target.toFixed(1);
} else {
element.textContent = target.toLocaleString();
}
}
}
requestAnimationFrame(update);
}
// Lance le compteur quand il entre à l'écran (moitié visible)
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const element = entry.target;
const target = parseFloat(element.dataset.target);
const isDecimal = element.dataset.target.includes('.');
animateCounter(element, target, 2000, isDecimal);
observer.unobserve(element);
}
});
}, {
threshold: 0.5
});
document.querySelectorAll('.counter-value[data-target]').forEach(el => observer.observe(el));
})();Progress Ring
Anneau de progression circulaire animé.
Bar Chart Animated
Graphique en barres avec effet de croissance.
Line Chart Draw
Ligne qui se dessine progressivement.
Pie Chart Reveal
Camembert avec segments qui apparaissent.
Gauge Meter
Jauge animée style speedometre.
Stat Cards
Cartes statistiques avec compteurs animés.
Comparison Bars
Barres horizontales pour comparer des valeurs.
Donut Chart
Graphique donut avec animation séquentielle.
Sparkline
Mini graphique en ligne pour tendances.
Counter Animation CSS
Compteur animé en pure CSS avec @property.
Circular Progress SVG
Cercle de progression avec animation.
Animated Bar Chart
Graphique a barres avec croissance animée.
Donut Chart CSS
Graphique donut avec conic-gradient.
Gauge Meter CSS
Jauge circulaire en pure CSS.
Step Progress Indicator
Indicateur d'étapes avec animation.
Star Rating Animated
Étoiles interactives avec animation.
Line Chart Drawing
Graphique linéaire SVG avec dessin animé.
Counter Odometer
Chiffres qui défilent comme un compteur kilométrique, chaque digit dans son conteneur avec scroll vertical.
Animated Donut Chart
Donut chart avec segments animés via conic-gradient et @property CSS pour des transitions fluides.
Live Sparkline
Sparkline SVG inline avec ajout de points animé et transitions de path fluides.
Gauge Meter
Jauge semi-circulaire avec rotation fluide de l'aiguille via CSS transform: rotate().
Bar Chart Race
Barres horizontales qui se réordonnent avec transitions CSS sur width et order.
Morphing Pie Chart
Segments de pie qui morphent entre deux états de données avec transitions conic-gradient.
Animated Stat Counter
Compteurs qui s'incrémentent avec easing, formatage avec virgules, via requestAnimationFrame.
Progress Steps
Indicateur multi-étapes avec lignes de connexion animées et transitions de couleur d'état.
Data Table Row Animation
Lignes de tableau qui glissent, s'illuminent au hover, et se réordonnent en douceur.
Heatmap Cell Animation
Cellules de grille changeant de couleur selon l'intensité avec transitions CSS fluides.