XP Level-Up Progress Bar — Free HTML CSS JS Snippet

Gamified progress bars are one of the most effective retention patterns borrowed from video games — Duolingo streaks, LinkedIn profile completeness, and countless SaaS onboarding checklists all lean on the same psychological hook an XP bar delivers natively: visible, incremental progress toward a rewarding threshold. This snippet builds a genuine game-style level-up bar, not just a static progress indicator — clicking the "+50 XP" button animates the fill, and crossing 100% triggers a real level-up sequence with a flash burst, a scale-pop on the level badge, and a toast notification, all while correctly carrying the XP remainder forward instead of losing it.

The core bug most XP bar implementations get wrong

The naive implementation of an XP bar resets to 0 the instant XP crosses the threshold, silently discarding whatever XP was earned past 100%. This snippet's addXp() function does the arithmetic correctly: when xp >= XP_PER_LEVEL, it computes const remainder = xp - XP_PER_LEVEL *before* resetting anything, temporarily clamps the visible bar to exactly 100 so the viewer sees the bar genuinely fill and overflow, and only after the level-up animation sequence completes does it set xp = remainder and level += 1. If a player earns 50 XP twice in a row starting from 70/100, the sequence correctly ends at Level 2 with 20/100 XP (70 + 50 + 50 = 170, minus 100 for the level gained), never at Level 2 with 0/100.

Sequencing the level-up animation with setTimeout

The level-up isn't a single CSS transition — it's a short choreographed sequence, and the JavaScript uses a setTimeout to stage it in two beats. First, render() is called immediately with xp clamped to 100, so the bar's existing transition: width 0.5s visibly finishes filling to the edge. After a 420ms delay (timed to land just after that fill transition completes), the actual level increment happens: flashBurst() retriggers a CSS animation on a .bar-flash overlay element by removing and re-adding its .burst class (with a void element.offsetWidth forced-reflow trick in between, which is necessary because browsers batch class changes and won't restart an already-playing CSS animation without a synchronous style read forcing the browser to acknowledge the removal first), popBadge() does the identical retrigger trick on the level number badge for its squash-and-pop @keyframes, and showLevelUpToast() adds a .show class to slide the "LEVEL UP!" toast into view before auto-hiding it after 1.4 seconds.

Resetting the bar without a backwards sweep

After the level increments, the bar needs to visually reset to the carried-over remainder — but simply setting width to the new lower percentage would trigger the existing CSS transition and animate the fill sweeping *backwards*, which reads as a bug, not a level-up. The fix is a classic instant-reset pattern: set barFill.style.transition = 'none', set the width to 0%, force a synchronous reflow with void barFill.offsetWidth, then clear the inline transition override so the *next* fill (on the following click) animates normally again. This three-step dance — disable transition, mutate the property, force reflow, re-enable transition — is the standard technique whenever you need to jump a CSS-transitioned property to a new value without animating the jump itself.

Visual polish: shimmer, badge glow, and toast

The bar fill has a continuous diagonal shimmer animation layered on top via a ::after pseudo-element with a translucent gradient sweeping left to right on a 2.2s loop, giving the bar a subtle "energized" look even at rest. The level badge uses a radial gold gradient (#fbbf24 to #f59e0b) with a layered box-shadow ring effect to separate it from the dark card background, reserving the richer gold palette specifically for this gamification element per the visual convention that XP and level indicators read as more premium in warm colors, while the fill bar itself stays on the neutral indigo accent used throughout the rest of the interface.