Un composant de chargement qui utilise un effet d’impulsion avec un bel anneau qui se propage comme des ondulations.
Ce « Pulse Ring Loader » est particulièrement efficace dans les situations suivantes.
Téléchargement/téléchargement de fichiers : idéal lorsque vous souhaitez représenter visuellement le « battement de cœur » des données envoyées et reçues.
Traitement de longue durée tel que l’analyse des données et la génération d’IA : contrairement à une simple animation de rotation, les expressions riches avec des ondulations étalées réduisent le stress pendant que les utilisateurs attendent.
Centre de la section Héros : Parce qu’il se présente comme un élément unique, il fonctionne également à merveille comme espace réservé pendant le chargement du contenu.
Effet synergique de dégradé et d’ombre : En utilisant un dégradé vif (indigo-violet-rose) dans la zone centrale et en ajoutant une luminescence de couleur similaire (ombre portée), il donne une impression moderne et haut de gamme.
Animation non linéaire (cubique-bézier) : Nous utilisons « cubique-bézier » pour la vitesse à laquelle l’anneau se propage, créant une ondulation naturelle qui se propage rapidement au début puis disparaît progressivement.
Ondulations multiples dues au retard : En définissant un décalage horaire (« animation-delay ») entre plusieurs anneaux, nous créons une continuité où le mouvement continue toujours.
Changement de couleur : Vous pouvez faire correspondre la couleur du thème en modifiant background: Linear-gradient(...) de .pulse-core ou border-color de .pulse-ring.
Taille et vitesse des ondulations : En augmentant la valeur transform: scale(3.5) de @keyframes ring-pulse, les ondulations se propageront davantage, et en changeant 2,5s de animation, vous pouvez ajuster la vitesse.
Condition de pulsation centrale : En modifiant transform: scale(1.2) de @keyframes core-pulse, vous pouvez modifier l’intensité du battement cardiaque au centre.
##Code d’implémentation
<div class="pulse-loader-container">
<div class="pulse-ring"></div>
<div class="pulse-ring delay-1"></div>
<div class="pulse-ring delay-2"></div>
<div class="pulse-core"></div>
</div>
<style>
/* Placement du conteneur dans tout le chargeur */
.pulse-loader-container {
position: relative;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
/* Élément central du noyau */
.pulse-core {
width: 30px;
height: 30px;
background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
border-radius: 50%;
position: absolute;
z-index: 10;
box-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
animation: core-pulse 2s infinite ease-in-out;
}
/* Élément anneau formant l'ondulation */
.pulse-ring {
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid rgba(168, 85, 247, 0.8);
box-sizing: border-box;
animation: ring-pulse 2.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
opacity: 0;
}
/* Délai d'animation des ondulations (décalage temporel) */
.delay-1 {
animation-delay: 0.8s;
}
.delay-2 {
animation-delay: 1.6s;
}
/* Animation de pulsation du noyau */
@keyframes core-pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
}
50% {
transform: scale(1.2);
/* Intensifier l'ombre lors du zoom pour amplifier l'effet lumineux */
box-shadow: 0 0 25px rgba(168, 85, 247, 0.8), 0 0 40px rgba(236, 72, 153, 0.4);
}
}
/* Animation d'expansion des ondulations */
@keyframes ring-pulse {
0% {
transform: scale(1);
opacity: 1;
border-width: 2px;
border-color: rgba(99, 102, 241, 1);
}
50% {
border-color: rgba(168, 85, 247, 0.5);
border-width: 1px;
}
100% {
transform: scale(3.5);
opacity: 0;
border-width: 0px;
border-color: rgba(236, 72, 153, 0);
}
}
</style>| Navigateur | Statut de compatibilité | Remarques |
| --- | --- | --- |
| Chrome | ✅Compatible | |
| Safaris | ✅Compatible | |
| Firefox | ✅Compatible | |
| Bord | ✅Compatible | |