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

Loyalty Points Widget — Rewards HTML CSS JS Snippet

Loyalty Points Widget · Cards · Plain HTML, CSS & JS · Live preview

CategoryCards
TagsCSS Grid

Copy & paste

Source Code

<div class="lp-card">
  <div class="lp-glow"></div>
  <div class="lp-head">
    <div>
      <div class="lp-tier"><span class="lp-dot"></span>Gold member</div>
      <div class="lp-balance"><span id="lpPoints">1680</span> <span class="lp-unit">pts</span></div>
    </div>
    <div class="lp-crown">👑</div>
  </div>

  <div class="lp-progress-head">
    <span id="lpNext">320 pts to Platinum</span>
    <span id="lpPct">84%</span>
  </div>
  <div class="lp-track"><div class="lp-fill" id="lpFill"></div></div>

  <div class="lp-rewards">
    <div class="lp-rtitle">Redeem your points</div>

    <div class="lp-reward" data-cost="500">
      <span class="lp-remoji">🎟️</span>
      <span class="lp-rinfo"><span class="lp-rname">$5 voucher</span><span class="lp-rcost">500 pts</span></span>
      <button class="lp-redeem" onclick="redeem(this)">Redeem</button>
    </div>
    <div class="lp-reward" data-cost="800">
      <span class="lp-remoji">🚚</span>
      <span class="lp-rinfo"><span class="lp-rname">Free shipping</span><span class="lp-rcost">800 pts</span></span>
      <button class="lp-redeem" onclick="redeem(this)">Redeem</button>
    </div>
    <div class="lp-reward" data-cost="1500">
      <span class="lp-remoji">💸</span>
      <span class="lp-rinfo"><span class="lp-rname">$20 voucher</span><span class="lp-rcost">1500 pts</span></span>
      <button class="lp-redeem" onclick="redeem(this)">Redeem</button>
    </div>
    <div class="lp-reward" data-cost="2500">
      <span class="lp-remoji">✨</span>
      <span class="lp-rinfo"><span class="lp-rname">Members-only drop</span><span class="lp-rcost">2500 pts</span></span>
      <button class="lp-redeem" onclick="redeem(this)">Redeem</button>
    </div>
  </div>

  <div class="lp-toast" id="lpToast"></div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), 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

Single-source points model
One points variable and updateUI drive the balance, progress bar, tier copy, and every reward button — trivial to wire to a real account.
Animated tier progress bar
updateUI sets the gradient bar's width to points / NEXT_TIER with a cubic-bezier transition and a glow, capping at 100%.
Affordability-gated buttons
Each reward enables only when affordable; otherwise it shows "Need N", turning a disabled state into a concrete goal.
Eased balance count-down
animateBalance tweens the number with a cubic ease-out requestAnimationFrame loop, making each spend feel tangible.
Automatic re-gating
After a redemption updateUI re-evaluates every reward against the new balance, flipping now-unaffordable buttons to "Need N".
Auto-dismissing toast
A confirmation pill slides up and clears its own timer on each show, so rapid redemptions never stack stale messages.
Data-attribute reward costs
Reward prices live on data-cost, so adding or repricing rewards is a markup edit with no JavaScript changes.
Premium dark styling
A gradient card with a radial glow, glowing tier dot, and gold accents gives membership the elevated look loyalty programmes rely on.

About this UI Snippet

Loyalty Points Widget — Tier Progress Bar, Redeemable Rewards & Affordability-Gated Buttons

Screenshot of the Loyalty Points Widget snippet rendered live

Loyalty programmes work because they give customers a reason to come back and a visible sense of progress toward a reward. The widget that surfaces a member's points has to do three jobs at once: show the current balance with status, show how close they are to the next tier, and let them spend points on rewards they can actually afford. This snippet implements all three in plain HTML, CSS, and vanilla JavaScript: a points balance with tier badge, an animated progress bar toward the next tier, a list of redeemable rewards, affordability-gated redeem buttons, an animated count-down on spend, and a confirmation toast.

Balance, tier, and progress

The card leads with a large points balance and a "Gold member" tier badge on a dark gradient with a warm glow — the premium treatment that loyalty programmes use to make membership feel valuable. Below it, updateUI computes progress toward NEXT_TIER as a percentage, animates the gradient bar's width with a cubic-bezier transition, and writes the remaining points ("320 pts to Platinum"). When the balance reaches the threshold, the copy switches to "Platinum unlocked!".

Affordability-gated redemption

Each reward carries its cost on a data-cost attribute. updateUI walks every reward and decides its button state: if the member can afford it, the button reads "Redeem"; if not, it disables and reads "Need N" — telling the user exactly how many more points they require rather than just greying out silently. This turns a dead-end into a goal, which is the whole point of a loyalty programme.

Animated balance count-down

When a reward is redeemed, redeem checks affordability, subtracts the cost, and calls animateBalance, which tweens the displayed number from the old value to the new one over 500ms using an eased requestAnimationFrame loop (cubic ease-out). Watching the points tick down makes the spend feel tangible — and then updateUI re-runs to re-gate every other reward against the new, lower balance, so buttons that are now unaffordable immediately switch to "Need N".

Confirmation toast

A pill toast slides up from the bottom of the card confirming the redeemed reward by name, auto-dismissing after a moment via a cleared-and-reset timer so rapid redemptions never stack stale toasts. The redeemed reward's own button locks to "✓ Done".

Everything is driven by a single points variable and the updateUI function, so wiring it to a real account is a matter of seeding points from your API and POSTing redemptions. Pair this widget with a stats card for account metrics, a progress bar for other goals, a gradient progress ring, or an order summary where vouchers apply.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA dark loyalty card appears showing 1680 points, a "Gold member" badge, a progress bar at 84% toward Platinum, and four rewards.
  2. 2
    Check affordability gatingRewards you can afford show "Redeem"; the 2500-point members-only drop is disabled and reads "Need 820", telling you exactly how short you are.
  3. 3
    Redeem a rewardClick "Redeem" on the $5 voucher — the balance counts down from 1680 to 1180, a toast confirms "Redeemed $5 voucher!", and the button locks to "✓ Done".
  4. 4
    Watch the bar updateThe progress bar shrinks toward the next tier and the "pts to Platinum" figure recalculates from the new balance.
  5. 5
    See re-gating in actionAfter spending, rewards you can no longer afford flip to "Need N" automatically — the whole list re-evaluates against the new balance.
  6. 6
    Seed real dataSet the points variable from your account API and adjust NEXT_TIER and reward data-cost values; the rest of the UI follows.

Real-world uses

Common Use Cases

E-commerce rewards programmes
Show points and let shoppers redeem vouchers and perks. Apply redeemed vouchers in an order summary at checkout.
Account and profile dashboards
Embed it in a member dashboard beside a stats card for spend, orders, and tier history.
Cafe and retail apps
A digital stamp/points card with redeemable freebies — the tier progress maps to the next free coffee or discount.
Gamified product engagement
Reward in-app actions with points toward perks; pair the progress with a progress bar for other milestones.
Referral and credit balances
Show referral credits and let users spend them, with affordability gating preventing overspend of available credit.
Subscription perks and tiers
Surface tier benefits and a path to the next level, alongside a subscription widget for plan management.
Related: Vanilla-Tilt 3D Card Grid
See the Vanilla-Tilt 3D Card Grid for a related cards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Seed the points variable from your loyalty API on load and render the reward rows from your catalogue, setting each data-cost. Call updateUI() once and the progress bar, tier copy, and button gating all reflect the live balance. Set NEXT_TIER from the member's current tier threshold.

In redeem, after the affordability check, POST the reward id to your endpoint and only commit the local deduction on success; on failure, revert the balance and re-enable the button. To avoid double-spends from rapid clicks, disable the button immediately (this snippet does) and treat the server's returned balance as authoritative.

Keep an array of tiers with thresholds and names, and in updateUI find the current and next tier from points to drive the badge and the "pts to next" copy. You can also list the perks unlocked at each tier below the bar so members see what the next level grants.

Give the progress bar role="progressbar" with aria-valuenow/aria-valuemax, put the redeem confirmation toast in an aria-live="polite" region, and make sure the "Need N" button text conveys the gating without relying on colour. The redeem controls are real <button> elements, so they are keyboard-operable by default.

In React, hold points in useState, derive the percentage and each button's disabled/label state in render, and animate the balance with a small effect or a tween library. In Vue, use a ref for points and computed values for progress and gating. In Angular, track points on the component and bind [style.width] and [disabled]. The card styling and bar CSS port unchanged.