webdevpuneet.com

Related Snippets

147 in Cards category
1–6 of 60

WOW.js Staggered Testimonial Wall

WOW.js Scroll Reveal Cards

Popmotion Swipe-Dismiss Stack

Popmotion Drag Inertia Card

AutoAnimate Filter Grid

CountUp.js Stat Cards

Stock Urgency Bar — Low Stock HTML CSS JS Snippet

Stock Urgency Bar · Cards · Plain HTML, CSS & JS · Live preview

CategoryCards
TagsCSS Animation

Copy & paste

Source Code

<div class="su-card">
  <div class="su-top">
    <div class="su-img">⌚</div>
    <div>
      <div class="su-name">Titanium Field Watch</div>
      <div class="su-price">$249 <span class="su-was">$329</span></div>
    </div>
    <div class="su-flame" id="suFlame">🔥 Selling fast</div>
  </div>

  <div class="su-bar-head">
    <span id="suSold">142 sold</span>
    <span class="su-left" id="suLeft">38 left</span>
  </div>
  <div class="su-track">
    <div class="su-fill" id="suFill"></div>
  </div>

  <div class="su-foot">
    <span class="su-pulse"></span>
    <span id="suViewers">17</span>&nbsp;people are viewing this right now
  </div>

  <button class="su-buy" onclick="buyOne()">Buy now — claim yours</button>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Load-time fill animation
requestAnimationFrame triggers the first render so the bar grows from zero on mount, drawing attention to how much stock is gone.
Two numbers, one render
Everything derives from sold and TOTAL through a single render function — accurate, honest, and trivial to wire to real inventory.
Colour escalation
The fill goes green → amber (.warn, ≤40 left) → red (.crit, ≤15 left), communicating urgency faster than reading a number.
Dual framing labels
"142 sold" and "38 left" appear together, showing both social-proof momentum and scarcity in one bar.
Pure-CSS viewer pulse
A pseudo-element ping keyframe scales and fades on a loop — a live-presence indicator with no JavaScript animation cost.
Drifting viewer count
A setInterval nudges the concurrent-viewer number randomly for a live feel; swap it for a real websocket count in production.
Escalating badge copy
The flame badge flips from "🔥 Selling fast" to "⚡ Almost gone" once stock is critical, reinforcing the colour change.
Graceful sold-out state
When stock hits zero the bar caps at 100%, the label reads "Sold out", and the buy button disables — no broken-looking UI.

About this UI Snippet

Stock Urgency Bar — Animated Sold Progress, Colour Escalation, Low-Stock Warning & Live Viewer Pulse

Screenshot of the Stock Urgency Bar snippet rendered live

Scarcity is one of the most powerful and well-documented levers in conversion psychology: shoppers move faster when they can see that an item is running low or selling quickly. The honest version of this — showing real sold counts, real remaining stock, and real concurrent interest — reassures buyers and reduces hesitation without resorting to fake timers. This snippet implements a complete, ethical stock-urgency widget in plain HTML, CSS, and vanilla JavaScript: an animated sold-versus-total progress bar, colour that escalates as stock drops, a low-stock warning, a live "people viewing" pulse, and a graceful sold-out state.

Animated sold progress bar

The bar fills from zero on load. On the first frame, requestAnimationFrame calls render(true), which sets the .su-fill width to sold / total as a percentage; a cubic-bezier transition animates the growth. That load-time animation draws the eye straight to how much of the stock is already gone — far more persuasive than a static bar. The bar head shows "142 sold" on the left and "38 left" on the right, so both framings (momentum and scarcity) are visible at once.

Colour escalation

As remaining stock falls, the fill changes colour by class: green by default, amber (.warn) at 40 or fewer remaining, and red (.crit) at 15 or fewer. The "left" label turns red and the flame badge switches from "🔥 Selling fast" to "⚡ Almost gone". This graduated escalation communicates increasing urgency through colour, which is processed faster than reading a number.

Live viewer pulse

A small green dot with a pure-CSS ping animation (a pseudo-element scales and fades on a loop) sits beside a "17 people are viewing this right now" line. A setInterval nudges that number up or down by a small random amount every couple of seconds, giving a live, breathing feel. In production you would replace the random drift with a real concurrent-viewer count from your analytics or a websocket — the rendering stays identical.

Honest, data-driven state

Everything derives from two numbers, sold and TOTAL, through one render function. The "Buy now" button calls buyOne, which increments sold and re-renders with animation — so the bar visibly advances and can tip the widget into warning, critical, and finally sold-out states, where the button disables and reads "Sold out". Because the entire UI is a function of real inventory numbers, there is nothing fabricated: swap in live stock and the urgency reflects reality.

Pair this widget with a product card, a variant selector so size-level stock drives the bar, a countdown timer for time-limited deals, or an add to cart button.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA product card appears and the green progress bar animates from empty to "142 sold / 38 left" with a pulsing live-viewer line below.
  2. 2
    Watch the live viewersThe "people viewing" number drifts up and down every couple of seconds beside a pulsing green dot, giving a sense of live demand.
  3. 3
    Buy to advance stockClick "Buy now — claim yours" — the sold count rises, the bar grows, and the remaining count drops.
  4. 4
    Trigger the warning stateKeep buying until 40 or fewer remain — the bar turns amber to signal stock is getting low.
  5. 5
    Trigger the critical stateDrop to 15 or fewer — the bar turns red, the "left" label goes red, and the badge switches to "⚡ Almost gone".
  6. 6
    Reach sold outBuy until none remain — the label reads "Sold out" and the button disables, demonstrating the graceful end state.

Real-world uses

Common Use Cases

Flash sales and limited drops
Show how fast a limited run is selling. Combine with a countdown timer for time-and-quantity-limited offers.
Product pages
Sit it under the price to nudge hesitant shoppers. Pair with an add to cart button so each add advances the bar.
Event and class registration
"38 seats left" for webinars, workshops, and events — the same sold/total model maps directly to ticket capacity.
Crowdfunding and pre-orders
Show units claimed against a goal or allocation, with colour escalation as a tier nears its cap.
Booking and reservation systems
Rooms or slots remaining for a date; the low-stock warning prompts users to book before availability runs out.
Variant-level scarcity
Drive the bar from the selected size or colour in a variant selector so urgency reflects the exact variant chosen.

Got questions?

Frequently Asked Questions

Set TOTAL and sold from your product data on load and call render(true). For live updates, push new sold counts over a websocket or poll an endpoint and re-render — the colour escalation, labels, and sold-out state all follow automatically from the numbers.

It is, as long as the numbers are real. This widget is built to reflect actual sold counts, actual remaining stock, and (when wired up) actual concurrent viewers — not fabricated timers or fake "only 1 left" claims. Honest scarcity reassures buyers; fake scarcity erodes trust and, in many jurisdictions, breaches consumer-protection rules.

Replace the random setInterval drift with a value from your real-time layer: increment a counter on a websocket "viewer joined" event and decrement on "left", or read a presence count from a service. Keep the pulsing dot and the update cadence so the number still feels live.

Add role="progressbar" with aria-valuemin, aria-valuemax, and a live aria-valuenow to the track, and put the low-stock and sold-out messages in an aria-live="polite" region. Never rely on the colour change alone — the "N left" text already conveys the state, which is what screen-reader users will hear.

In React, hold sold and viewer count in useState, derive the percentage and colour class with useMemo, and animate width via the style prop. In Vue, use refs and a computed percentage with :class for escalation. In Angular, track state on the component and bind [style.width] and [class.warn]/[class.crit]. The pulse and gradient CSS port unchanged.