Shopping Cart Loader
Items drop into a shopping cart one after another, bounce as they land and make the cart dip. A natural fit for checkout, add-to-cart and order processing waits.
Also known as: add to cart animation, cart loading animation css, ecommerce loader.
HTML
<div class="ldr-shopping-cart" role="status" aria-label="Loading">
<svg viewBox="0 0 48 48" aria-hidden="true">
<rect class="ldr-shopping-cart-item" x="16" y="12" width="11" height="11" rx="2"/>
<circle class="ldr-shopping-cart-item" cx="32" cy="18.5" r="5"/>
<g class="ldr-shopping-cart-cart">
<path class="ldr-shopping-cart-grid" d="M21 15v14M27 15v14M33 15v14"/>
<path d="M3 9h6l6 20h22l4-14H11"/>
<path d="M15 29l-1.5 5H37"/>
<circle cx="17" cy="39.5" r="2.8"/>
<circle cx="33" cy="39.5" r="2.8"/>
</g>
</svg>
</div>CSS
.ldr-shopping-cart {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
width: var(--s);
height: var(--s);
}
.ldr-shopping-cart svg {
display: block;
width: 100%;
height: 100%;
}
.ldr-shopping-cart-cart {
fill: none;
stroke: var(--c);
stroke-width: 2.8;
stroke-linecap: round;
stroke-linejoin: round;
transform-box: fill-box;
transform-origin: 50% 100%;
animation: ldr-shopping-cart-dip 2.4s infinite;
}
.ldr-shopping-cart-cart circle {
fill: var(--c);
stroke: none;
}
.ldr-shopping-cart-grid {
stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
stroke-width: 1.6;
}
.ldr-shopping-cart-item {
fill: color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent);
opacity: 0;
animation: ldr-shopping-cart-drop 2.4s infinite;
}
.ldr-shopping-cart-item + .ldr-shopping-cart-item {
animation-delay: 0.8s;
}
@keyframes ldr-shopping-cart-drop {
0% { transform: translateY(-60%); opacity: 0; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35); }
6% { opacity: 1; }
24% { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1); }
30% { transform: translateY(-5%); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
36% { transform: translateY(0); }
80% { transform: translateY(0); opacity: 1; }
90% { transform: translateY(0); opacity: 0; }
100% { transform: translateY(-60%); opacity: 0; }
}
@keyframes ldr-shopping-cart-dip {
0%, 22% { transform: translateY(0) rotate(0); }
26% { transform: translateY(2%) rotate(-2deg); }
33%, 55% { transform: translateY(0) rotate(0); }
59% { transform: translateY(2%) rotate(2deg); }
66%, 100% { transform: translateY(0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-shopping-cart, .ldr-shopping-cart *, .ldr-shopping-cart::before, .ldr-shopping-cart::after, .ldr-shopping-cart *::before, .ldr-shopping-cart *::after {
animation-duration: 3s;
}
}Customizing this loader
- Color: set
--ldr-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--ldr-size. Every dimension in the snippet is derived from it. Currently previewing64px. - Speed: change the duration on the
animationshorthand. Delays on the children are relative, so they keep their rhythm. - Accessibility: the root carries
role="status"and anaria-labelso screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.