capsule translucide avec barre qui glisse en boucle (style iOS). Parfaite pour un chargement court.
<!-- 2) Capsule Progress -->
<div class="fx2-wrap">
<div class="fx2-track"><span class="fx2-bar"></span></div>
</div>
<style>
.fx2-wrap{ background:#fff; padding:16px; border-radius:16px; display:inline-block; }
.fx2-track{
width:320px; height:14px; border-radius:999px; position:relative; overflow:hidden;
background: linear-gradient(180deg,#f2f4f8,#e9edf3);
box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.12);
}
.fx2-bar{
position:absolute; left:-40%; top:0; height:100%; width:40%;
border-radius:inherit;
background: linear-gradient(90deg, rgba(0,122,255,.2), rgba(0,122,255,.55), rgba(0,122,255,.2));
animation: fx2 1.3s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes fx2{ to{ transform: translateX(350%); } }
@media (prefers-reduced-motion: reduce){ .fx2-bar{ animation:none; } }
</style>