webdevpuneet.com

Related Snippets

144 in Dashboards category
1–6 of 60

Interact.js Draggable and Resizable Dashboard Panels with Snapping

Dragula Copy vs Move Lists with Spill Control

SortableJS Shared Groups: Clone from a Palette into a Page Builder

SortableJS Drag Handle with Pinned and Locked Rows

SortableJS Nested Sortable Tree with Keyboard Controls

SortableJS Multi-List Kanban with Persistence and WIP Limit

Leaderboard Podium — Top 3 Podium HTML CSS JS

Leaderboard Podium · Dashboards · Plain HTML, CSS & JS · Live preview

CategoryDashboards
TagsDashboard UIData Tables

Copy & paste

Source Code

<div class="lp-card">
  <h3>Top performers</h3>
  <div class="lp-podium" id="lpPodium"></div>
  <ol class="lp-rest" id="lpRest"></ol>
</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

Olympic podium ordering
Winner centred and tallest, second left, third right — via a deliberate 2-1-3 render order.
Placement encoded four ways
Position, bar height, gold/silver/bronze colour, and medal badge all signal rank.
Larger winner avatar
First place gets a bigger avatar for extra emphasis.
Animated rise
Bars grow with a scaleY transform triggered via requestAnimationFrame.
Ranked remainder list
Ranks four onward show as a numbered list with avatars and scores.
Auto sort and rank
Players are sorted by score, so ranks and placement derive from the data.
Generated avatar initials
Initials come from each name — no images needed.
Data-driven & no library
Renders from a PLAYERS array in plain HTML/CSS/JS — zero dependencies.

About this UI Snippet

Leaderboard Podium — Gold-Silver-Bronze Winners Stand with a Ranked List

Screenshot of the Leaderboard Podium snippet rendered live

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.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA leaderboard renders with a gold/silver/bronze podium and a ranked list beneath.
  2. 2
    See the podium orderThe winner is centred and tallest, with second left and third right.
  3. 3
    Watch the riseThe podium bars animate up from the floor on load.
  4. 4
    Swap in your dataReplace the PLAYERS array with your own { name, score, color } entries.
  5. 5
    Use any score typePoints, sales, steps, or reputation — it sorts and ranks automatically.
  6. 6
    Restyle itChange the medal emojis, podium colours, or bar heights to fit your theme.

Real-world uses

Common Use Cases

Game and app leaderboards
Celebrate the top three with a gold, silver and bronze stand, with the winner centred and tallest while the remaining ranks list below.
Sales contest standings
Show top reps on a team dashboard, with bars rising via a scaleY transform so the reveal feels like an awards ceremony.
Step and fitness challenges
Pair with activity rings so each ranked participant also shows how close they are to their own daily goals.
Plain ranked tables
Use the leaderboard table instead when many columns of stats matter more than a single podium moment for the top three.
Rank-versus-position layout reference
Study how placement is encoded four ways, with order, bar height, medal colour and a larger winner avatar all reinforcing the same ranking.
Related: New Hire Day-One Checklist
See the New Hire Day-One Checklist for a related dashboards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Because a real podium puts first place centre and tallest, with second to the left and third to the right. The snippet computes true ranks by sorting on score, 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 what makes the podium look correct — rendering left-to-right by rank would misplace everyone.

Through redundant cues: centre/left/right position, descending bar heights, gold/silver/bronze gradients, 🥇🥈🥉 medal badges, and a larger avatar for first. Encoding rank multiple ways means a glance is enough to read first, second, and third — which is the advantage a podium has over a plain ranked list.

The podium celebrates and draws attention to the top three, providing aspiration; the list gives complete standings for everyone else without the visual weight of more podium columns. This podium-plus-list structure is the standard leaderboard layout because it balances impact (the hero podium) with completeness (the full ranking) efficiently.

Each bar has transform-origin: bottom and starts at scaleY(0). On the next animation frame a class is added that sets scaleY(1), and a CSS transition animates the growth — so the bars rise from the floor like a podium being raised. The requestAnimationFrame defer is needed so the browser paints the collapsed state first, letting the transition run.

Hold the players in state, sort and slice into top-3 and the rest, and render the podium (in 2-1-3 order) and list from those. Add the rise animation class in a useEffect (React), onMounted (Vue), or ngAfterViewInit (Angular). The ordering and initials logic is framework-agnostic — only the state and the deferred animation trigger move into the framework.