Bootstrap 5
Timeline
Progress
Order
Tracking
Vertical
Step
Chronologie progression commande Bootstrap 5 avec étapes visuelles, timeline verticale animée et statuts colorés pour suivi commande.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Snippets Progress Timeline Order Boostrap5 202605060030 | AngularForAll</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<style>
.timeline-vertical {
position: relative;
padding-left: 3rem;
}
.timeline-vertical::before {
content: '';
position: absolute;
left: 1.25rem;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, #28a745 0%, #0d6efd 50%, #6c757d 100%);
}
.timeline-step {
position: relative;
margin-bottom: 3rem;
padding: 1.5rem;
background: white;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.timeline-step:last-child {
margin-bottom: 0;
}
.timeline-dot {
position: absolute;
left: -2.4rem;
top: 1.5rem;
width: 25px;
height: 25px;
border-radius: 50%;
border: 3px solid white;
box-shadow: 0 0 0 3px #0d6efd;
}
.timeline-step.completed .timeline-dot {
background: #28a745;
box-shadow: 0 0 0 3px #28a745;
}
.timeline-step.active .timeline-dot {
background: #ffc107;
box-shadow: 0 0 0 3px #ffc107;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}
.timeline-date {
font-size: 0.8rem;
color: #6c757d;
margin-bottom: 0.5rem;
}
.timeline-title {
font-weight: 600;
margin-bottom: 0.5rem;
}
</style>
</head>
<body>
<div class="container py-5">
<h2 class="text-center mb-5">Historique de Commande</h2>
<div class="timeline-vertical">
<div class="timeline-step completed">
<div class="timeline-dot"></div>
<div class="timeline-date">
<i class="bi bi-calendar3 me-1"></i>15 Mars 2024 - 14:30
</div>
<h5 class="timeline-title">Commande confirmée</h5>
<p class="text-muted mb-0">Votre commande #12345 a été confirmée et est en cours de préparation.</p>
</div>
<div class="timeline-step completed">
<div class="timeline-dot"></div>
<div class="timeline-date">
<i class="bi bi-calendar3 me-1"></i>16 Mars 2024 - 09:15
</div>
<h5 class="timeline-title">Commande expédiée</h5>
<p class="text-muted mb-0">Votre colis a été expédié depuis notre entrepôt.</p>
<span class="badge bg-success">Tracking: FR123456789</span>
</div>
<div class="timeline-step active">
<div class="timeline-dot"></div>
<div class="timeline-date">
<i class="bi bi-calendar3 me-1"></i>18 Mars 2024 - 11:00
</div>
<h5 class="timeline-title">En transit</h5>
<p class="text-muted mb-0">Votre colis est en cours d'acheminement vers votre adresse.</p>
</div>
<div class="timeline-step">
<div class="timeline-dot"></div>
<div class="timeline-date">
<i class="bi bi-calendar3 me-1"></i>20 Mars 2024 - Prévu
</div>
<h5 class="timeline-title">Livraison prévue</h5>
<p class="text-muted mb-0">Livraison estimée entre 8h et 18h.</p>
</div>
</div>
</div>
</body>
</html>Télécharger le fichier source