Bootstrap 5
Css Loaders
Loading Animation
Spinner Css
Snippets Html
Collection de 30 loaders CSS animés, spinners et effets de chargement compatibles 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 Loaders CSS 01 | 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', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 40px 0;
}
.header {
text-align: center;
margin-bottom: 40px;
color: white;
}
.header h1 {
font-weight: 700;
font-size: 2.8rem;
text-shadow: 0 4px 20px rgba(0,0,0,0.2);
letter-spacing: -0.5px;
}
.header p {
font-size: 1.1rem;
opacity: 0.95;
font-weight: 300;
}
.badge-counter {
background: rgba(255,255,255,0.2);
backdrop-filter: blur(10px);
padding: 8px 24px;
border-radius: 50px;
display: inline-block;
margin-top: 15px;
border: 1px solid rgba(255,255,255,0.3);
}
.card {
border: none;
border-radius: 24px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 15px 35px -8px rgba(0,0,0,0.2);
transition: all 0.3s ease;
height: 100%;
overflow: hidden;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 25px 45px -10px rgba(0,0,0,0.3);
background: white;
}
.card-header-custom {
padding: 16px 20px 8px;
border-bottom: 1px solid rgba(0,0,0,0.05);
display: flex;
align-items: center;
justify-content: space-between;
}
.card-title {
font-weight: 650;
font-size: 1rem;
color: #1e293b;
margin: 0;
}
.badge-type {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 4px 12px;
border-radius: 30px;
font-size: 0.7rem;
font-weight: 500;
}
.card-body {
padding: 24px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 160px;
}
.card-footer-custom {
padding: 12px 20px 16px;
background: transparent;
border-top: 1px solid rgba(0,0,0,0.03);
color: #64748b;
font-size: 0.8rem;
text-align: center;
}
/* Styles pour les loaders personnalisés */
.loader-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
width: 100%;
}
/* Spinner 1 : Cercle simple */
.spinner-1 {
width: 50px;
height: 50px;
border: 4px solid #e2e8f0;
border-top-color: #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Spinner 2 : Double cercle */
.spinner-2 {
width: 50px;
height: 50px;
border: 4px solid transparent;
border-top-color: #764ba2;
border-bottom-color: #764ba2;
border-radius: 50%;
animation: spin 1.2s linear infinite;
}
/* Spinner 3 : Cercle avec point */
.spinner-3 {
width: 50px;
height: 50px;
border: 3px solid #f093fb;
border-radius: 50%;
position: relative;
animation: spin 1.5s linear infinite;
}
.spinner-3::before {
content: '';
position: absolute;
top: -3px;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
background: #f093fb;
border-radius: 50%;
}
/* Spinner 4 : Trois points pulsants */
.spinner-4 {
display: flex;
gap: 8px;
}
.spinner-4 .dot {
width: 12px;
height: 12px;
background: #667eea;
border-radius: 50%;
animation: pulse 1.4s ease-in-out infinite;
}
.spinner-4 .dot:nth-child(2) { animation-delay: 0.2s; background: #764ba2; }
.spinner-4 .dot:nth-child(3) { animation-delay: 0.4s; background: #f093fb; }
/* Spinner 5 : Barres */
.spinner-5 {
display: flex;
gap: 4px;
}
.spinner-5 .bar {
width: 6px;
height: 30px;
background: #667eea;
border-radius: 3px;
animation: scale 1.2s ease-in-out infinite;
}
.spinner-5 .bar:nth-child(2) { animation-delay: 0.1s; background: #764ba2; }
.spinner-5 .bar:nth-child(3) { animation-delay: 0.2s; background: #f093fb; }
.spinner-5 .bar:nth-child(4) { animation-delay: 0.3s; background: #667eea; }
.spinner-5 .bar:nth-child(5) { animation-delay: 0.4s; background: #764ba2; }
/* Spinner 6 : Anneau tournant */
.spinner-6 {
width: 50px;
height: 50px;
border-radius: 50%;
background: conic-gradient(from 0deg, #667eea, #764ba2, #f093fb, #667eea);
animation: spin 1s linear infinite;
mask: radial-gradient(transparent 18px, black 19px);
-webkit-mask: radial-gradient(transparent 18px, black 19px);
}
/* Spinner 7 : Cube */
.spinner-7 {
width: 40px;
height: 40px;
background: #667eea;
animation: cubeRotate 1.5s infinite ease-in-out;
}
/* Spinner 8 : Vague */
.spinner-8 {
display: flex;
gap: 3px;
}
.spinner-8 .wave {
width: 6px;
height: 30px;
background: #764ba2;
border-radius: 3px;
animation: wave 1.2s ease-in-out infinite;
}
.spinner-8 .wave:nth-child(2) { animation-delay: 0.1s; }
.spinner-8 .wave:nth-child(3) { animation-delay: 0.2s; }
.spinner-8 .wave:nth-child(4) { animation-delay: 0.3s; }
.spinner-8 .wave:nth-child(5) { animation-delay: 0.4s; }
/* Spinner 9 : Cercle avec ombre */
.spinner-9 {
width: 50px;
height: 50px;
border: 4px solid rgba(102, 126, 234, 0.2);
border-top-color: #667eea;
border-radius: 50%;
animation: spin 0.8s linear infinite;
box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}
/* Spinner 10 : Flip */
.spinner-10 {
width: 40px;
height: 40px;
background: #f093fb;
animation: flip 1.2s infinite ease-in-out;
}
/* Spinner 11 : Infinity */
.spinner-11 {
width: 50px;
height: 25px;
position: relative;
}
.spinner-11::before,
.spinner-11::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
border: 3px solid #667eea;
border-radius: 50%;
top: 0;
}
.spinner-11::before {
left: 0;
animation: infinityLeft 1.5s infinite;
}
.spinner-11::after {
right: 0;
animation: infinityRight 1.5s infinite;
}
/* Spinner 12 : Growing circle */
.spinner-12 {
width: 30px;
height: 30px;
background: #764ba2;
border-radius: 50%;
animation: grow 1s ease-in-out infinite;
}
/* Spinner 13 : Dots grid */
.spinner-13 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.spinner-13 .grid-dot {
width: 10px;
height: 10px;
background: #667eea;
border-radius: 2px;
animation: fade 1.5s ease-in-out infinite;
}
.spinner-13 .grid-dot:nth-child(2) { animation-delay: 0.1s; }
.spinner-13 .grid-dot:nth-child(3) { animation-delay: 0.2s; }
.spinner-13 .grid-dot:nth-child(4) { animation-delay: 0.3s; }
.spinner-13 .grid-dot:nth-child(5) { animation-delay: 0.4s; }
.spinner-13 .grid-dot:nth-child(6) { animation-delay: 0.5s; }
.spinner-13 .grid-dot:nth-child(7) { animation-delay: 0.6s; }
.spinner-13 .grid-dot:nth-child(8) { animation-delay: 0.7s; }
.spinner-13 .grid-dot:nth-child(9) { animation-delay: 0.8s; }
/* Spinner 14 : Progress bar */
.spinner-14 {
width: 100%;
height: 6px;
background: #e2e8f0;
border-radius: 10px;
overflow: hidden;
}
.spinner-14 .progress-fill {
width: 30%;
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
border-radius: 10px;
animation: progressMove 1.5s ease-in-out infinite;
}
/* Spinner 15 : Text loader */
.spinner-15 {
font-size: 18px;
font-weight: 600;
color: #667eea;
}
.spinner-15::after {
content: '...';
animation: dots 1.5s steps(4, end) infinite;
}
/* Spinner 16 : Square rotate */
.spinner-16 {
width: 40px;
height: 40px;
border: 3px solid #f093fb;
animation: squareRotate 2s infinite;
}
/* Spinner 17 : Circle fill */
.spinner-17 {
width: 50px;
height: 50px;
border: 3px solid #e2e8f0;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.spinner-17::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0%;
background: #667eea;
animation: fill 2s ease-in-out infinite;
}
/* Spinner 18 : Bouncing ball */
.spinner-18 {
width: 20px;
height: 20px;
background: #764ba2;
border-radius: 50%;
animation: bounce 0.8s ease-in-out infinite;
}
/* Spinner 19 : Rainbow border */
.spinner-19 {
width: 50px;
height: 50px;
border-radius: 50%;
border: 4px solid;
border-color: #667eea #764ba2 #f093fb #e2e8f0;
animation: spin 1.5s linear infinite;
}
/* Spinner 20 : Fading squares */
.spinner-20 {
display: flex;
gap: 5px;
}
.spinner-20 .square {
width: 15px;
height: 15px;
background: #f093fb;
animation: fadeSquare 1.2s ease-in-out infinite;
}
.spinner-20 .square:nth-child(2) { animation-delay: 0.2s; }
.spinner-20 .square:nth-child(3) { animation-delay: 0.4s; }
/* Spinner 21 : Clock */
.spinner-21 {
width: 50px;
height: 50px;
border: 3px solid #667eea;
border-radius: 50%;
position: relative;
}
.spinner-21::before {
content: '';
position: absolute;
width: 3px;
height: 20px;
background: #667eea;
top: 5px;
left: 50%;
transform-origin: bottom;
animation: clock 2s linear infinite;
}
/* Spinner 22 : Zigzag */
.spinner-22 {
width: 60px;
height: 20px;
background: repeating-linear-gradient(90deg, #764ba2 0px, #764ba2 8px, transparent 8px, transparent 16px);
animation: zigzag 1s linear infinite;
}
/* Spinner 23 : Circle pulse */
.spinner-23 {
width: 50px;
height: 50px;
border-radius: 50%;
background: radial-gradient(circle, #f093fb, #667eea);
animation: circlePulse 1.5s ease-in-out infinite;
}
/* Spinner 24 : Ring rotate */
.spinner-24 {
width: 50px;
height: 50px;
border: 3px solid transparent;
border-top-color: #667eea;
border-right-color: #667eea;
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
/* Spinner 25 : Orbit */
.spinner-25 {
width: 60px;
height: 60px;
position: relative;
}
.spinner-25 .orbit {
position: absolute;
width: 15px;
height: 15px;
background: #764ba2;
border-radius: 50%;
top: 0;
left: 50%;
transform: translateX(-50%);
animation: orbit 1.5s linear infinite;
}
/* Spinner 26 : Neon */
.spinner-26 {
width: 50px;
height: 50px;
border: 3px solid #f093fb;
border-radius: 50%;
box-shadow: 0 0 15px #f093fb, 0 0 30px #f093fb inset;
animation: spin 1s linear infinite;
}
/* Spinner 27 : Minimal dots */
.spinner-27 {
width: 8px;
height: 8px;
background: #667eea;
border-radius: 50%;
box-shadow: 15px 0 #667eea, -15px 0 #667eea;
animation: minimalDots 1s ease-in-out infinite;
}
/* Spinner 28 : Circle dash */
.spinner-28 {
width: 50px;
height: 50px;
border: 4px dashed #764ba2;
border-radius: 50%;
animation: spin 2s linear infinite;
}
/* Spinner 29 : Half circle */
.spinner-29 {
width: 50px;
height: 25px;
overflow: hidden;
}
.spinner-29::before {
content: '';
display: block;
width: 50px;
height: 50px;
border: 4px solid #f093fb;
border-radius: 50%;
border-bottom-color: transparent;
animation: spin 1s linear infinite;
}
/* Spinner 30 : Morph */
.spinner-30 {
width: 40px;
height: 40px;
background: #667eea;
animation: morph 1.5s ease-in-out infinite;
}
/* Animations */
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes pulse {
0%, 60%, 100% { transform: scale(1); opacity: 0.5; }
30% { transform: scale(1.3); opacity: 1; }
}
@keyframes scale {
0%, 40%, 100% { transform: scaleY(0.4); }
20% { transform: scaleY(1); }
}
@keyframes cubeRotate {
0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
50% { transform: perspective(120px) rotateX(-180deg) rotateY(0deg); }
100% { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }
}
@keyframes wave {
0%, 40%, 100% { transform: scaleY(0.4); }
20% { transform: scaleY(1); }
}
@keyframes flip {
0% { transform: perspective(120px) rotateX(0deg); }
50% { transform: perspective(120px) rotateX(-180deg); }
100% { transform: perspective(120px) rotateX(-360deg); }
}
@keyframes infinityLeft {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(15px); }
}
@keyframes infinityRight {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-15px); }
}
@keyframes grow {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.5); opacity: 1; }
}
@keyframes fade {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
@keyframes progressMove {
0% { width: 10%; margin-left: 0; }
50% { width: 70%; margin-left: 15%; }
100% { width: 10%; margin-left: 90%; }
}
@keyframes dots {
0%, 20% { content: ''; }
40% { content: '.'; }
60% { content: '..'; }
80%, 100% { content: '...'; }
}
@keyframes squareRotate {
0% { transform: rotate(0deg); }
25% { transform: rotate(90deg); }
50% { transform: rotate(180deg); }
75% { transform: rotate(270deg); }
100% { transform: rotate(360deg); }
}
@keyframes fill {
0% { height: 0%; }
50% { height: 100%; }
100% { height: 0%; }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
@keyframes fadeSquare {
0%, 100% { opacity: 0.2; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1); }
}
@keyframes clock {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes zigzag {
0% { background-position: 0 0; }
100% { background-position: 16px 0; }
}
@keyframes circlePulse {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.2); opacity: 1; }
}
@keyframes orbit {
from { transform: rotate(0deg) translateX(25px) rotate(0deg); }
to { transform: rotate(360deg) translateX(25px) rotate(-360deg); }
}
@keyframes minimalDots {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
@keyframes morph {
0% { border-radius: 0; transform: rotate(0deg); }
50% { border-radius: 50%; transform: rotate(180deg); }
100% { border-radius: 0; transform: rotate(360deg); }
}
/* Bootstrap spinner override */
.spinner-border-custom {
width: 3rem;
height: 3rem;
}
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<div class="header">
<h1>🎨 30 Loaders CSS</h1>
<p>Collection de spinners et animations de chargement</p>
<div class="badge-counter">
<i class="bi bi-collection me-2"></i>30 exemples · Bootstrap 5 · CSS Pur
</div>
</div>
<!-- Grille de loaders -->
<div class="row g-4">
<!-- Loader 1 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-arrow-repeat me-1"></i>Spinner Classique</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-1"></div>
</div>
</div>
<div class="card-footer-custom">Cercle simple avec bordure</div>
</div>
</div>
<!-- Loader 2 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-arrow-repeat me-1"></i>Double Cercle</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-2"></div>
</div>
</div>
<div class="card-footer-custom">Bordure haut et bas</div>
</div>
</div>
<!-- Loader 3 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-dot me-1"></i>Cercle + Point</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-3"></div>
</div>
</div>
<div class="card-footer-custom">Anneau avec point mobile</div>
</div>
</div>
<!-- Loader 4 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-three-dots me-1"></i>Points Pulsants</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-4">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
<div class="card-footer-custom">Trois points animés</div>
</div>
</div>
<!-- Loader 5 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-soundwave me-1"></i>Barres</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-5">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</div>
</div>
<div class="card-footer-custom">Égaliseur audio</div>
</div>
</div>
<!-- Loader 6 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-palette me-1"></i>Conic Gradient</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-6"></div>
</div>
</div>
<div class="card-footer-custom">Dégradé conique</div>
</div>
</div>
<!-- Loader 7 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-box me-1"></i>Cube 3D</span>
<span class="badge-type">CSS 3D</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-7"></div>
</div>
</div>
<div class="card-footer-custom">Cube en rotation</div>
</div>
</div>
<!-- Loader 8 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-water me-1"></i>Vague</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-8">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>
</div>
</div>
<div class="card-footer-custom">Effet de vague</div>
</div>
</div>
<!-- Loader 9 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-brightness-high me-1"></i>Ombre Portée</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-9"></div>
</div>
</div>
<div class="card-footer-custom">Avec box-shadow</div>
</div>
</div>
<!-- Loader 10 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-arrow-left-right me-1"></i>Flip</span>
<span class="badge-type">CSS 3D</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-10"></div>
</div>
</div>
<div class="card-footer-custom">Retournement 3D</div>
</div>
</div>
<!-- Loader 11 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-infinity me-1"></i>Infinity</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-11"></div>
</div>
</div>
<div class="card-footer-custom">Symbole infini</div>
</div>
</div>
<!-- Loader 12 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-circle me-1"></i>Growing</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-12"></div>
</div>
</div>
<div class="card-footer-custom">Cercle qui grossit</div>
</div>
</div>
<!-- Loader 13 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-grid-3x3 me-1"></i>Grille</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-13">
<div class="grid-dot"></div><div class="grid-dot"></div><div class="grid-dot"></div>
<div class="grid-dot"></div><div class="grid-dot"></div><div class="grid-dot"></div>
<div class="grid-dot"></div><div class="grid-dot"></div><div class="grid-dot"></div>
</div>
</div>
</div>
<div class="card-footer-custom">9 points en grille</div>
</div>
</div>
<!-- Loader 14 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-bar-chart me-1"></i>Progress Bar</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-14">
<div class="progress-fill"></div>
</div>
</div>
</div>
<div class="card-footer-custom">Barre de progression</div>
</div>
</div>
<!-- Loader 15 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-chat-dots me-1"></i>Text Loader</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-15">Chargement</div>
</div>
</div>
<div class="card-footer-custom">Texte avec points</div>
</div>
</div>
<!-- Loader 16 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-square me-1"></i>Square Rotate</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-16"></div>
</div>
</div>
<div class="card-footer-custom">Carré tournant</div>
</div>
</div>
<!-- Loader 17 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-droplet-half me-1"></i>Circle Fill</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-17"></div>
</div>
</div>
<div class="card-footer-custom">Remplissage progressif</div>
</div>
</div>
<!-- Loader 18 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-basketball me-1"></i>Bouncing</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-18"></div>
</div>
</div>
<div class="card-footer-custom">Balle rebondissante</div>
</div>
</div>
<!-- Loader 19 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-rainbow me-1"></i>Rainbow</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-19"></div>
</div>
</div>
<div class="card-footer-custom">Bordure multicolore</div>
</div>
</div>
<!-- Loader 20 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-square-fill me-1"></i>Fading Squares</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-20">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
</div>
<div class="card-footer-custom">Carrés en fondu</div>
</div>
</div>
<!-- Loader 21 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-clock me-1"></i>Clock</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-21"></div>
</div>
</div>
<div class="card-footer-custom">Aiguille tournante</div>
</div>
</div>
<!-- Loader 22 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-activity me-1"></i>Zigzag</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-22"></div>
</div>
</div>
<div class="card-footer-custom">Motif répétitif</div>
</div>
</div>
<!-- Loader 23 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-circle-half me-1"></i>Circle Pulse</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-23"></div>
</div>
</div>
<div class="card-footer-custom">Pulsation radiale</div>
</div>
</div>
<!-- Loader 24 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-arrow-clockwise me-1"></i>Ring Rotate</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-24"></div>
</div>
</div>
<div class="card-footer-custom">Anneau partiel</div>
</div>
</div>
<!-- Loader 25 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-globe me-1"></i>Orbit</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-25">
<div class="orbit"></div>
</div>
</div>
</div>
<div class="card-footer-custom">Satellite en orbite</div>
</div>
</div>
<!-- Loader 26 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-lightning me-1"></i>Neon</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-26"></div>
</div>
</div>
<div class="card-footer-custom">Effet néon lumineux</div>
</div>
</div>
<!-- Loader 27 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-three-dots-vertical me-1"></i>Minimal Dots</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-27"></div>
</div>
</div>
<div class="card-footer-custom">Points minimalistes</div>
</div>
</div>
<!-- Loader 28 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-dash-circle me-1"></i>Circle Dash</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-28"></div>
</div>
</div>
<div class="card-footer-custom">Bordure en pointillés</div>
</div>
</div>
<!-- Loader 29 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-circle me-1"></i>Half Circle</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-29"></div>
</div>
</div>
<div class="card-footer-custom">Demi-cercle</div>
</div>
</div>
<!-- Loader 30 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<div class="card-header-custom">
<span class="card-title"><i class="bi bi-shape me-1"></i>Morph</span>
<span class="badge-type">CSS</span>
</div>
<div class="card-body">
<div class="loader-wrapper">
<div class="spinner-30"></div>
</div>
</div>
<div class="card-footer-custom">Transformation progressive</div>
</div>
</div>
<!-- Bootstrap Spinners (exemples supplémentaires inclus dans la grille) -->
<!-- Note: Les 30 exemples sont déjà couverts ci-dessus -->
</div>
<!-- Footer -->
<div class="text-center mt-5">
<p class="text-white-50">
<i class="bi bi-code-square me-1"></i>
30 loaders CSS purs · Compatibles tous navigateurs · Bootstrap 5
</p>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur