Bootstrap
Card
Commande
Progression
Html
Template Bootstrap de carte de suivi de commandes avec étapes de progression et statuts visuels.
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Carte de Progression Commandes | AngularForAll</title>
<!-- Bootstrap 4 & Font Awesome -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<style>
body {
background-color: #f8f9fc;
padding: 30px;
font-family: 'Inter', sans-serif;
color: #333;
}
/* Style général de la carte */
.progress-pie-card {
border: none;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
background: #fff;
overflow: hidden;
}
.progress-pie-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.card-header-progress {
background-color: #fcfcfd;
border-bottom: 1px solid #e9ecef;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
}
.card-header-progress h3 {
font-size: 1rem;
font-weight: 700;
color: #343a40;
margin: 0;
flex-grow: 1;
}
.card-body-progress {
padding: 1.25rem;
}
/* Barre de progression personnalisée */
.progress-pie-chart {
height: 25px; /* Hauteur de la barre */
border-radius: 8px; /* Coins arrondis */
overflow: hidden; /* Assure que les barres internes respectent le border-radius */
margin-bottom: 15px;
background-color: #e9ecef; /* Fond pour les cas où la somme n'est pas 100% */
}
.progress-pie-chart .progress-bar {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 600;
color: #fff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
transition: width 0.6s ease; /* Animation de la barre */
}
/* Couleurs pour les segments de la barre */
.progress-bar-created {
background-color: #4e73df;
} /* Bleu */
.progress-bar-pending {
background-color: #f6c23e;
} /* Jaune/Orange */
.progress-bar-validated {
background-color: #1cc88a;
} /* Vert */
/* Liste des détails sous la barre */
.command-details-list {
list-style: none;
padding: 0;
margin: 0;
}
.command-details-list li {
display: flex;
align-items: center;
font-size: 0.9rem;
color: #555;
margin-bottom: 8px;
}
.command-details-list li:last-child {
margin-bottom: 0;
}
.color-dot {
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 10px;
flex-shrink: 0;
}
/* Couleurs des points */
.dot-created {
background-color: #4e73df;
}
.dot-pending {
background-color: #f6c23e;
}
.dot-validated {
background-color: #1cc88a;
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<!-- CARD: Commandes (Pie Progress Bar) -->
<div class="col-lg-4 col-md-6 mb-4">
<div class="progress-pie-card">
<div class="card-header-progress">
<i class="fas fa-shopping-cart mr-2 text-muted"></i>
<h3>Commandes</h3>
</div>
<div class="card-body-progress">
<!-- Progress Bar -->
<div class="progress progress-pie-chart">
<div
class="progress-bar progress-bar-created"
role="progressbar"
style="width: 33.33%"
aria-valuenow="1"
aria-valuemin="0"
aria-valuemax="3"
data-toggle="tooltip"
data-placement="top"
title="1 Créée"
></div>
<div
class="progress-bar progress-bar-pending"
role="progressbar"
style="width: 33.33%"
aria-valuenow="1"
aria-valuemin="0"
aria-valuemax="3"
data-toggle="tooltip"
data-placement="top"
title="1 En attente"
></div>
<div
class="progress-bar progress-bar-validated"
role="progressbar"
style="width: 33.33%"
aria-valuenow="1"
aria-valuemin="0"
aria-valuemax="3"
data-toggle="tooltip"
data-placement="top"
title="1 Validée"
></div>
</div>
<!-- Détails de la liste -->
<ul class="command-details-list">
<li>
<span class="color-dot dot-created"></span>
1 créée
</li>
<li>
<span class="color-dot dot-pending"></span>
1 en attente
</li>
<li>
<span class="color-dot dot-validated"></span>
1 validée
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Scripts Bootstrap (JQuery et Popper.js sont nécessaires pour les tooltips) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>