@magic-spells/cart-progress-bar

Cart Progress
Bar

A drop-in web component that shows customers how close they are to free shipping. Smart messaging, smooth animations, and Shopify-ready money formatting — no dependencies.

Install npm i @magic-spells/cart-progress-bar
Size (gzip) ~2.2 KB 
<cart-progress-bar
  threshold="75.00"
  current="25.50"
  money-format="${{amount}}"
  message-below="Add [amount] more for FREE shipping!">
  <p data-content-cart-progress-message></p>
  <progress-bar></progress-bar>
</cart-progress-bar>
Interactive Demo

Try it live

Control the progress bar in real-time. Adjust the cart amount and threshold to see messages and animations update instantly.

Controls
34%
Result

Add [amount] more to get FREE shipping! 🚚
Themes

Different Themes

CSS custom properties make it easy to create any visual style. Here are three approaches.

Minimal

[amount] away from free delivery
Bold

🎯 [amount] more for FREE shipping!
Neon

⚡ Only [amount] until TURBO shipping!
Usage

Getting Started

Simple HTML setup with full customization through attributes and JavaScript.

Basic Setup

<cart-progress-bar threshold="75.00" current="25.50" money-format="${{amount}}" message-above="Congratulations! FREE shipping!" message-below="Add [amount] more for FREE shipping!"> <p data-content-cart-progress-message></p> <progress-bar></progress-bar> </cart-progress-bar>

Currency Formatting

<!-- US Dollars --> <cart-progress-bar money-format="${{amount}}" ...> <!-- Euros with comma separator --> <cart-progress-bar money-format="{{amount_with_comma_separator}} EUR" ...> <!-- No decimals --> <cart-progress-bar money-format="${{amount_no_decimals}}" ...> <!-- Shopify Liquid integration --> <cart-progress-bar money-format="{{ shop.money_format }}" ...>

JavaScript API

const progressBar = document.querySelector('cart-progress-bar'); // Set progress percentage directly progressBar.setPercent(67); // Update cart amount progressBar.setCurrentAmount(45.50); // Change threshold progressBar.setThresholdAmount(100.00); // Get current progress info const info = progressBar.getProgress(); console.log(info.percent, info.isComplete, info.thresholdAmount);

Custom Styling

cart-progress-bar { /* Colors */ --cart-progress-bar-bg: #e9ecef; --cart-progress-bar-fill-before: #28a745; --cart-progress-bar-fill-after: #007bff; /* Structure (optional) */ --cart-progress-bar-height: 16px; --cart-progress-bar-border-radius: 8px; }
Features

What you get

Smart Messaging

Template-based messages with [amount] placeholders. Supports Shopify money formats and multi-currency.

Customizable

CSS custom properties for colors, sizing, fonts, and spacing. Easy theming support.

Responsive

Mobile-optimized with responsive breakpoints and touch-friendly interactions.

Smooth Animations

Buttery smooth transitions with completion shine effects and progress level indicators.

Easy Integration

Drop-in web component that works with any framework. Clean JavaScript API for dynamic updates.