Leaderboard Podium — Top 3 Podium HTML CSS JS

A leaderboard podium celebrates the top three with a winners' stand — gold in the centre and tallest, silver and bronze flanking — then lists the rest in rank order. It's the high-impact way to show standings in games, sales contests, fitness challenges, and competitions, far more motivating than a plain list. This snippet builds it in plain HTML, CSS, and vanilla JavaScript, with an animated podium and a ranked remainder — no library.

Podium order vs. rank order

The clever bit is the *display order*. The winner ranks first but is rendered in the *middle*, with second on the left and third on the right — the real-Olympic-podium arrangement. The snippet sorts players by score to get true ranks, then renders the top three in a deliberate [2nd, 1st, 3rd] order so the centre column is the winner. Separating logical rank from visual position is the detail that makes a podium read correctly; rendering them left-to-right by rank would look wrong.

Heights and medals encode placement

The three podium bars have descending heights (gold tallest, bronze shortest) and gold/silver/bronze gradients, and each avatar carries a 🥇🥈🥉 medal badge. The winner also gets a larger avatar. These redundant cues — position, height, colour, and medal — make first/second/third unmistakable at a glance, which is the whole point of a podium over a list.

Animated rise

The bars animate up with a scaleY transform from a bottom origin, triggered on the next animation frame so the CSS transition runs — the standard requestAnimationFrame technique. The bars growing from the floor mimics a podium rising, giving the reveal a celebratory feel appropriate to a winners' stand.

Ranked list for everyone else

Below the podium, ranks four onward render as a clean numbered list with avatars, names, and scores in a tabular-figure column. Combining a podium (for the celebrated top) with a list (for the long tail) is the standard leaderboard structure — the podium draws the eye and provides aspiration, while the list gives complete standings without wasting space on more podium columns.

Data-driven and drop-in

Everything comes from a PLAYERS array; the component sorts it, splits the top three onto the podium, and lists the rest, with avatar initials generated from names. Swap in your scores — points, sales, steps, reputation — and it renders the standings. It's a clear reference for podium ordering, placement encoding, and combining a hero podium with a ranked list. One edge case worth handling explicitly: ties. Sorting by score alone leaves the order of equal scores up to the sort's stability, so for a leaderboard where ties are likely, add a deterministic tiebreaker — alphabetical name, or whoever reached the score first by timestamp — otherwise the same dataset can render players in a different podium order on each reload. The same care applies to live, frequently-updating leaderboards: re-rendering the podium from scratch on every score update would re-trigger the rise animation and steal focus from whatever the user was looking at, so for a live feed you'd diff the new ranking against the current one and only re-run the entrance animation for players whose position actually changed.