@-webkit-keyframes bar-progress { 0% {  background-position:0 0; }  to {  background-position:-60px -60px; } } @keyframes bar-progress { 0% {  background-position:0 0; }  to {  background-position:-60px -60px; } } #offcanvas_sidecart .tdfreeshipping { padding:15px; box-shadow:0 0 10px 0 rgba(229, 229, 229, 0.7); } #offcanvas_sidecart .tdfreeshipping .shipping_progress { margin:15px 0 0; } .shipping_progress { width:100%; height:10px; background-color:var(--shipBarColor, #ededed); border-radius:5px; margin:15px 0 5px; position:relative; } .shipping_progress > span { width:0; border-radius:5px; background-color:var(--shipActiveBarColor, var(--color-primary)); transition:width .4s ease-in-out; display:block; height:100%; animation:5s linear infinite bar-progress; position:relative; background-size:1rem 1rem; background-image:linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%); } .shipping_progress > span > svg { position:absolute; bottom:-2px; right:0; stroke:#FFF; height:30px; width:30px; fill:var(--carIconColor, var(--color-primary)); } .shipping_progress > span[data-shippercent="0"] > svg { right:-30px; } .shipping_progress svg .wheel { fill:#FFF; }