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

Poll Widget — Free HTML CSS JS Voting Snippet

Poll Widget · Cards · Plain HTML, CSS & JS · Live preview

CategoryCards
TagsCSS Grid

Copy & paste

Source Code

<div class="page">
  <div class="poll-card" id="poll-card">
    <div class="poll-badge">Poll</div>
    <h3 class="poll-q">Which frontend framework do you prefer in 2026?</h3>
    <div class="poll-options" id="poll-options">
      <button class="poll-opt" onclick="vote(this)" data-id="0">
        <span class="opt-label">React</span>
        <span class="opt-bar-wrap"><span class="opt-bar" style="--pct:0%"></span></span>
        <span class="opt-pct">0%</span>
      </button>
      <button class="poll-opt" onclick="vote(this)" data-id="1">
        <span class="opt-label">Vue.js</span>
        <span class="opt-bar-wrap"><span class="opt-bar" style="--pct:0%"></span></span>
        <span class="opt-pct">0%</span>
      </button>
      <button class="poll-opt" onclick="vote(this)" data-id="2">
        <span class="opt-label">Svelte</span>
        <span class="opt-bar-wrap"><span class="opt-bar" style="--pct:0%"></span></span>
        <span class="opt-pct">0%</span>
      </button>
      <button class="poll-opt" onclick="vote(this)" data-id="3">
        <span class="opt-label">Angular</span>
        <span class="opt-bar-wrap"><span class="opt-bar" style="--pct:0%"></span></span>
        <span class="opt-pct">0%</span>
      </button>
    </div>
    <div class="poll-footer">
      <span class="vote-count" id="vote-count">0 votes</span>
      <button class="reset-btn" onclick="reset()" id="reset-btn" style="display:none">Reset</button>
    </div>
  </div>
</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

CSS custom property --pct on each bar: transition:width 0.5s ease animates on update
Seeded starting data: SEED array gives realistic proportions before voting
Winner highlight: .winner class (green) applied to option(s) with max votes
One-vote enforcement: myVote !== null check + disabled on all buttons after vote
Reset: restores SEED counts and clears myVote — re-enables voting
Vote count footer: shows total votes with toLocaleString formatting
Grid layout per option: label / bar / percentage in 3 columns

About this UI Snippet

Poll Widget — Click to Vote, Animated Progress Bars, Winner Highlight & Vote Count

Screenshot of the Poll Widget snippet rendered live

A poll that opens at "0 votes, 0%, 0%, 0%, 0%" feels like a room nobody else has walked into yet — and that emptiness is itself a reason not to vote. The polls that *do* drive engagement, on community sites and product pages alike, almost always show a confident, populated result the instant they load, with bars that animate into place the moment you add your voice to the count. This snippet recreates that — a question card with four options, realistic seeded vote counts, click-to-vote with smoothly animating progress bars, a green "winner" highlight, a running total, and a reset button for demoing the before-and-after.

Animating a CSS custom property instead of width directly

Each result bar is a <span> with width: var(--pct) and transition: width 0.5s ease in its CSS, while the JavaScript only ever calls element.style.setProperty('--pct', pct + '%'). That indirection is the whole trick: writing to a custom property updates a value that CSS itself is watching, so the browser's transition engine smoothly interpolates from the old percentage to the new one without a single line of animation code on the JavaScript side. The same property-driven approach shows up in the Sparkline Chart and Donut Chart snippets — hand the *value* to CSS and let CSS own the *motion*.

Why the poll opens with votes already in it

The SEED array — [142, 67, 58, 43] — exists purely to solve the cold-start problem: a poll showing a believable 142-to-43 spread looks like something people actually care about, while one showing four flat zero-bars looks abandoned. Casting your own vote simply increments the seeded count rather than starting a new one, and reset() restores the original SEED array — handy for replaying the demo, and a pattern worth borrowing any time you're building a component that needs to look "alive" before a single real user has interacted with it.

Highlighting a winner only once there's something to win

Before anyone votes, every option renders identically — there's no winner yet, so nothing should look like one. The moment vote() runs, render() finds Math.max(...votes) and applies the .winner class (green border, green bar, green percentage) to whichever option(s) match it — plural, deliberately, since a tie means every tied option gets to be "the winner" rather than arbitrarily picking one. That small bit of correctness is easy to skip and immediately noticeable when it's missing.

One vote, then the door closes

A single module-level variable, myVote, remembers which option — if any — the current visitor chose. The vote() function's very first line is a guard: if (myVote !== null) return, and every button gets disabled once a vote is cast. It's the simplest possible implementation of "one vote per person," and the FAQ below covers the natural next step — persisting that choice to localStorage so a page refresh can't be used to vote again.

Step by step

How to Use

  1. 1
    Click any option to cast your voteClicking an option increments its count, animates all progress bars to their new percentages, and highlights the winning option in green. Voting disables all buttons so only one vote per session is possible.
  2. 2
    Click Reset to undo your voteThe Reset button restores the seeded starting counts and re-enables voting. Use this to demonstrate the before/after state or to let multiple users test the snippet.
  3. 3
    Update the poll question and optionsEdit .poll-q text for the question. Add or remove .poll-opt buttons — increment data-id for each new option. Update the SEED array to match your starting vote counts.
  4. 4
    Seed with realistic dataUpdate const SEED = [N,N,N,N] with real vote counts from your database. This shows users a credible result distribution before they vote, increasing engagement compared to starting from zero.
  5. 5
    Connect to a real voting APIIn vote(), replace the local votes[id]++ with fetch("/api/poll/vote", { method:"POST", body: JSON.stringify({ optionId: id }) }). On page load, fetch current counts and set votes = apiCounts before calling render().
  6. 6
    Export in your formatClick "HTML" for a standalone file, "JSX" for a React component with useState for votes and myVote, or "Tailwind" for a React + Tailwind CSS version.

Real-world uses

Common Use Cases

Community and forum opinion polls
Embed polls in forum threads, blog posts, and community pages to collect quick audience opinions. The seeded data prevents the "empty poll" effect where bars show 0% before the first votes come in.
Product feedback and feature preference surveys
Ask users which features to build next, which design direction to take, or which pricing tier makes sense. The instant visual result encourages voting by showing users they are contributing to a real distribution.
Real-time poll with WebSocket vote updates
Connect to a WebSocket that broadcasts new votes. On each message, update the votes array and call render(). All connected users see bars animate in real time as votes come in — no page reload needed.
Newsletter and email campaign vote widget
Embed the poll as a standalone page linked from an email campaign. Track which option link is clicked as the vote. Show the poll result page with all votes visible when the user arrives.
Study CSS custom property animation technique
The progress bar uses style.setProperty("--pct", pct+"%") to update a CSS variable, which drives the bar width via transition. This pattern avoids direct style manipulation and lets CSS handle the animation cleanly.
Live event audience interaction and Q&A polls
Show a poll during a presentation or live stream. Audience members vote on their phones while the presenter screen shows the results updating in real time. The winner highlight announces the result visually.

Got questions?

Frequently Asked Questions

Each .opt-bar has width: var(--pct) in CSS and transition: width 0.5s ease. When JavaScript calls element.style.setProperty("--pct", "42%"), the CSS variable updates, which changes the computed width from the old value to "42%". The CSS transition animates between the old and new computed width values over 0.5 seconds. This approach avoids JavaScript animation loops and keeps all animation logic in CSS.

Store the voted state in localStorage: localStorage.setItem("poll_voted_" + pollId, optionId). On page load: const saved = localStorage.getItem("poll_voted_" + pollId); if (saved !== null) { myVote = +saved; render(); }. This persists the vote across refreshes. For stronger enforcement, use a server-side vote record with the user's IP or account ID.

Remove the onclick handler from .poll-opt buttons and add pointer-events: none to the CSS. Or add a "Show results" button that calls render() with myVote set to -1 (a sentinel value that shows bars without highlighting a winner). This lets users see the distribution without casting a vote.

Click "JSX" to download. Manage votes (array of numbers) and myVote (number|null) with useState. The vote function: setVotes(prev => { const next=[...prev]; next[id]++; return next; }); setMyVote(id). Derive total, percentages, and maxVotes from the votes array with useMemo. Pass a resetPoll prop that calls setVotes(SEED) and setMyVote(null).