Hola @inmalab y @mateoweb,
@mateoweb ha acertado plenamente con el diagnóstico. El problema se produce porque el elemento .free-shipping-progress-bar tiene su propio border-radius y un width: 100% con respecto a su padre, .free-shipping-progress. Cuando el ancho del padre cambia por la animación, el hijo con su propio border-radius puede exceder visualmente los límites del padre hasta que la animación se completa, o simplemente renderizarse de forma incorrecta.
La solución es simple: el border-radius solo debe aplicarse al contenedor padre (.free-shipping-progress), y este contenedor debe tener overflow: hidden para asegurarse de que cualquier contenido que se extienda más allá de sus límites redondeados sea recortado.
Aquí tienes el código CSS corregido para themes/classic/assets/css/custom.css:
.free-shipping-progress {
background-color: #e0e0e0;
border-radius: 5px; /* Solo el contenedor padre define el borde */
height: 10px;
width: 0%; /* Se actualiza con JS */
transition: width 0.3s ease-in-out;
overflow: hidden; /* **Añadir esto** para recortar el contenido */
}
.free-shipping-progress-bar {
background-color: #28a745;
Con estos cambios, .free-shipping-progress se encargará de los bordes redondeados y overflow: hidden asegurará que .free-shipping-progress-bar no se 'escape' visualmente de esos bordes durante la animación.