9:41
My Cart
Free Delivery Progress
Reference spec showing all three states of the free delivery threshold progress bar component.
State 1: Far from goal
Add R 230.00 more for FREE delivery
R 120.00 current goal R 350.00
Cart subtotal R 120.00
Threshold R 350.00
Remaining R 230.00
Progress 34%
Bar colour Red (#EF4444)
State 2: Almost there
Add R 55.01 more for FREE delivery!
R 294.99 current goal R 350.00
Cart subtotal R 294.99
Threshold R 350.00
Remaining R 55.01
Progress 85%
Bar colour Amber (#F59E0B)
State 3: Goal reached
You qualify for FREE delivery!
R 412.00 current goal R 350.00
Cart subtotal R 412.00
Threshold R 350.00
Remaining R 0.00
Progress 100% (capped)
Bar colour Green (#22C55E)

Screen Annotations — CON-063 Free Delivery Progress

Screen ID: CON-063
Flow: Reference / Spec Page
Previous: CON-062 Cart Swipe Delete
Next: CON-064 Backup Review
Purpose: This is a reference/specification screen showing all three visual states of the free delivery progress bar component. It is not a user-facing screen but serves as documentation for developers and designers.
Threshold Mechanic:
• Free delivery threshold is configurable per vendor (default: R 350.00).
• The progress bar reflects the cart subtotal as a percentage of the threshold.
• The bar colour changes based on proximity to the goal:
   — Red (0-60%): Far from the goal, standard urgency
   — Amber (61-99%): Almost there, increased urgency
   — Green (100%): Goal reached, celebratory state
• The progress percentage is capped at 100% even if cart exceeds threshold.
Text Variations:
• Below threshold: "Add R [remaining] more for FREE delivery"
• Near threshold (>75%): "Add R [remaining] more for FREE delivery!" (with exclamation)
• At/above threshold: Checkmark icon + "You qualify for FREE delivery!"
Dynamic Updates: The progress bar, text, remaining amount, and colour all update in real-time as items are added to or removed from the cart. Smooth CSS transitions are applied to the bar width changes.
Delivery Fee Impact: When the threshold is reached, the delivery fee line in the Order Summary changes from "R 29.99" to "FREE" (with strikethrough on the original amount). This provides instant visual feedback of the savings.