Bootstrap 5
Loader Css
Loading Animation
Spinner Bootstrap
Snippets Html
Collection d’exemples de loaders animés avec différents styles et variations en Bootstrap 5.
<!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>Snippets Loader Style 02 | AngularForAll</title>
<!-- Bootstrap 5 + Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
/* Cercles décoratifs en arrière-plan */
.bg-circle {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, rgba(100,150,255,0.08) 0%, transparent 70%);
pointer-events: none;
}
.circle-1 {
width: 600px;
height: 600px;
top: -200px;
right: -100px;
}
.circle-2 {
width: 400px;
height: 400px;
bottom: -100px;
left: -50px;
background: radial-gradient(circle, rgba(168,139,255,0.06) 0%, transparent 70%);
}
.circle-3 {
width: 300px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
}
/* Conteneur principal */
.loading-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 48px;
padding: 48px 56px;
box-shadow:
0 30px 60px -12px rgba(0,0,0,0.4),
0 0 0 1px rgba(255,255,255,0.1) inset;
text-align: center;
position: relative;
z-index: 10;
animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Logo / Icône */
.loader-icon {
margin-bottom: 32px;
position: relative;
}
.loader-icon i {
font-size: 64px;
color: #3b82f6;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.05); }
}
/* Titre */
.loading-title {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.5px;
color: #1e293b;
margin-bottom: 8px;
}
/* Sous-titre */
.loading-subtitle {
font-size: 15px;
color: #64748b;
margin-bottom: 32px;
font-weight: 400;
}
/* Barre de progression Bootstrap personnalisée */
.progress {
height: 6px;
border-radius: 100px;
background: #e2e8f0;
margin-bottom: 24px;
overflow: hidden;
}
.progress-bar {
background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
background-size: 200% 100%;
border-radius: 100px;
animation: gradientMove 2s ease infinite, progressWidth 2s ease-in-out infinite alternate;
}
@keyframes gradientMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes progressWidth {
0% { width: 20%; }
100% { width: 90%; }
}
/* Spinner Bootstrap */
.spinner-wrapper {
margin: 20px 0 16px;
}
/* Texte de statut */
.status-text {
color: #475569;
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
}
.status-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 16px;
}
.dot {
width: 8px;
height: 8px;
border-radius: 8px;
background: #cbd5e1;
animation: dotPulse 1.4s ease-in-out infinite;
}
.dot:nth-child(1) { animation-delay: 0s; background: #667eea; }
.dot:nth-child(2) { animation-delay: 0.2s; background: #764ba2; }
.dot:nth-child(3) { animation-delay: 0.4s; background: #f093fb; }
@keyframes dotPulse {
0%, 60%, 100% { transform: scale(1); opacity: 0.5; }
30% { transform: scale(1.3); opacity: 1; }
}
/* Footer */
.loading-footer {
margin-top: 24px;
color: #94a3b8;
font-size: 13px;
font-weight: 400;
}
/* Responsive */
@media (max-width: 576px) {
.loading-card {
padding: 32px 28px;
margin: 20px;
border-radius: 36px;
}
.loading-title {
font-size: 24px;
}
.loader-icon i {
font-size: 52px;
}
}
</style>
</head>
<body>
<!-- Cercles décoratifs -->
<div class="bg-circle circle-1"></div>
<div class="bg-circle circle-2"></div>
<div class="bg-circle circle-3"></div>
<!-- Carte de chargement principale -->
<div class="loading-card">
<!-- Icône animée -->
<div class="loader-icon">
<i class="bi bi-cube"></i>
</div>
<!-- Titre -->
<h2 class="loading-title">Chargement en cours</h2>
<p class="loading-subtitle">Veuillez patienter un instant...</p>
<!-- Barre de progression Bootstrap -->
<div class="progress" style="width: 280px;">
<div class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Spinner Bootstrap alternatif -->
<div class="spinner-wrapper">
<div class="spinner-border text-primary" style="width: 2.5rem; height: 2.5rem;" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
</div>
<!-- Statut -->
<div class="status-text">
<i class="bi bi-wifi me-1"></i> Connexion en cours...
</div>
<!-- Points animés -->
<div class="status-dots">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<!-- Footer -->
<div class="loading-footer">
<i class="bi bi-shield-check me-1"></i> Connexion sécurisée
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Script pour redirection automatique (optionnel) -->
<script>
// Simulation de chargement avec redirection automatique
// Décommentez pour activer la redirection après 3 secondes
/*
setTimeout(() => {
window.location.href = 'https://votresite.com/accueil';
}, 3000);
*/
// Animation du texte de statut
const statusText = document.querySelector('.status-text');
const messages = [
'Connexion en cours...',
'Chargement des ressources...',
'Préparation de l\'interface...',
'Presque prêt...'
];
let index = 0;
setInterval(() => {
index = (index + 1) % messages.length;
statusText.innerHTML = `<i class="bi bi-arrow-repeat me-1"></i> ${messages[index]}`;
}, 1500);
</script>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur