Hola @fernando_lab,
@claudiahub ha dado en el clavo. El problema que describes es muy común cuando se anima el ancho de un elemento hijo dentro de un contenedor con border-radius.
La clave está en que el contenedor padre debe "recortar" cualquier parte del hijo que intente salirse de sus bordes redondeados. Sin overflow: hidden; en el padre, el border-radius del hijo se renderiza independientemente, haciendo que parezca que se desborda.
Aquí tienes el CSS modificado que deberías usar en themes/classic/assets/css/custom.css:
.free-shipping-progress-wrapper {
width: 100%;
height: 15px;
background-color: #e0e0e0;
border-radius: 8px;
margin-top: 10px;
overflow: hidden; /* Esta es la línea clave */
}
.free-shipping-progress-bar {
height: 100%;
Explicación de los cambios:
overflow: hidden; en .free-shipping-progress-wrapper: Esta propiedad asegura que cualquier contenido que se extienda más allá de los límites del div contenedor sea recortado. De esta manera, el border-radius del contenedor se aplica correctamente, y la barra de progreso interior no desbordará visualmente las esquinas redondeadas durante su transición de ancho.
Con este ajuste, la barra de progreso debería verse mucho más limpia y profesional, especialmente durante las animaciones.