Se rendre au contenu

Welcome .


Sign u

Cette question a été signalée
33 Vues

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>
Ignorer
Publications associées Réponses Vues Activité
0
août 25
3
0
août 25
4
0
août 25
2
0
août 25
3
0
août 25
3