Voici un Pack roues de chargement html/css
<!--
SPINNING WHEEL LOADER — Plug & Play
-----------------------------------
How to use:
1) Drop this whole snippet into your page (anywhere inside <body>). No build tools needed.
2) Customize via inline CSS variables on the element:
style="--size:72px; --color:#10b981; --thickness:8px; --speed:900ms; --track:#e5e7eb"
3) To pause, add data-paused="true". Respects prefers-reduced-motion automatically.
Copy one of the examples at the bottom into your page where you want the loader.
-->
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Spinning Wheel Loader</title>
<style>
:root {
/* Defaults — override per element with inline styles */
--size: 64px; /* overall size */
--thickness: 6px; /* ring thickness */
--color: #4f46e5; /* active arc color */
--track: #e5e7eb; /* background ring color */
--speed: 1s; /* rotation duration */
}
/* Accessible hide utility */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Base spinner */
.spinner {
width: var(--size);
height: var(--size);
display: inline-block;
border-radius: 9999px;
border: var(--thickness) solid var(--track);
border-top-color: var(--color);
animation: spin var(--speed) linear infinite;
box-sizing: border-box;
/* Smooth edges */
-webkit-mask-image: radial-gradient(circle, #000 60%, transparent 61%);
mask-image: radial-gradient(circle, #000 60%, transparent 61%);
}
/* Solid arc variant (use class .spinner--solid) */
.spinner--solid {
border: none;
background:
conic-gradient(from 0turn, var(--color) 0turn 0.25turn, transparent 0.25turn 1turn),
radial-gradient(circle at center, transparent calc(50% - var(--thickness)), #000 calc(50% - var(--thickness) + 0.5px));
-webkit-mask: radial-gradient(circle at center, #000 60%, transparent 61%);
mask: radial-gradient(circle at center, #000 60%, transparent 61%);
}
@keyframes spin { to { transform: rotate(1turn); } }
/* Pause via attribute */
.spinner[data-paused="true"] { animation-play-state: paused; }
/* Respect OS reduced motion */
@media (prefers-reduced-motion: reduce) {
.spinner { animation: none; }
}
/* Optional: centers the demo examples below (safe to remove) */
.demo { display: grid; gap: 1rem; place-items: center; padding: 2rem; font-family: system-ui, sans-serif; }
.row { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.label { font-size: 0.9rem; color: #374151; min-width: 10ch; }
.card { padding: 1rem; border: 1px solid #e5e7eb; border-radius: 0.75rem; }
code { background: #f3f4f6; padding: 0.2rem 0.35rem; border-radius: 0.35rem; }
</style>
</head>
<body>
<!-- Example usages (remove this section in production) -->
<section class="demo">
<div class="row">
<div class="label">Par défaut</div>
<div class="card">
<div class="spinner" role="status" aria-live="polite" aria-label="Chargement">
<span class="sr-only">Chargement…</span>
</div>
</div>
</div>
<div class="row">
<div class="label">Personnalisée</div>
<div class="card">
<div class="spinner" style="--size:72px; --thickness:8px; --color:#10b981; --track:#e5e7eb; --speed:900ms" role="status" aria-label="Chargement">
<span class="sr-only">Chargement…</span>
</div>
</div>
</div>
<div class="row">
<div class="label">Variante solide</div>
<div class="card">
<div class="spinner spinner--solid" style="--size:56px; --thickness:10px; --color:#ef4444; --speed:700ms" role="status" aria-label="Chargement">
<span class="sr-only">Chargement…</span>
</div>
</div>
</div>
<div class="row">
<div class="label">Pause / Reprise</div>
<div class="card">
<div class="spinner" id="demo-pause" style="--size:56px; --color:#0ea5e9; --speed:1200ms" role="status" aria-label="Chargement"></div>
<button id="toggle" style="padding:0.5rem 0.75rem; border:1px solid #e5e7eb; border-radius:0.5rem; background:#fff; cursor:pointer">Basculer pause</button>
</div>
</div>
<p>Intégration : placez <code><div class="spinner"></code> à l’endroit voulu, avec vos variables CSS en ligne.</p>
</section>
<script>
// Demo: toggle pause (safe to remove)
const btn = document.getElementById('toggle');
const spin = document.getElementById('demo-pause');
btn?.addEventListener('click', () => {
const paused = spin.getAttribute('data-paused') === 'true';
spin.setAttribute('data-paused', (!paused).toString());
});
</script>
</body>
</html>