Poll Vote Bars

A poll that sweeps its result bars into place the moment you vote, your pick burning accent.

Default theme?

417 votes · tap to vote

Build a 3-option poll that reveals its results only after you vote. Before voting: a question and three full-width option buttons with hairline borders on a paper surface. A monospace footer reads "417 votes - tap to vote". On vote: this is the payoff moment - all three bars sweep in at once. Each option's background fills from the left to its result percentage (e.g. 62/26/12) over 0.6s with a decisive ease like cubic-bezier(.22,1,.36,1), staggered 80ms apart top to bottom. Your pick fills with 16% accent and gets an accent border plus a check icon that springs in (scale from 0, slight rotation, stiffness ~520); the others fill with 6% ink. Percentage labels fade in at each bar's right edge ~0.25s after its sweep starts. The footer count rolls up by one and the text flips to "418 votes - thanks!". Clicking your choice again un-votes and everything sweeps back out (bars to 0, percentages gone) so the demo is replayable. Accessibility: options are buttons with aria-pressed; the footer is aria-live="polite"; the fill bars are aria-hidden since the percentages carry the data. Under prefers-reduced-motion bars appear at full width instantly. Colors as tokens: one accent, ink, paper. Percentages are content - keep them in monospace with tabular numbers. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.

Rate it
0
0

We'd like to measure how the site gets used, with Google Analytics. It sets cookies. Everything the site needs to work runs either way. How we handle data