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

Petition Signature Counter — Live Count-Up Signature Widget HTML CSS JS

Petition Signature Counter · Dashboards · Plain HTML, CSS & JS · Live preview

CategoryDashboards
TagsAccessibilityDashboard UI

Copy & paste

Source Code

<div class="psc-card">
  <p class="psc-cause">Protect the Cedar Creek Wetlands</p>

  <div class="psc-count" id="pscCount">0</div>
  <p class="psc-label">signatures — goal: <b id="pscGoalLabel">25,000</b></p>

  <div class="psc-bar-track">
    <div class="psc-bar-fill" id="pscBarFill"></div>
  </div>

  <form class="psc-form" id="pscForm">
    <input type="text" id="pscName" placeholder="Full name" required autocomplete="name">
    <input type="email" id="pscEmail" placeholder="Email address" required autocomplete="email">
    <button type="submit" class="psc-submit" id="pscSubmit">Sign this petition</button>
  </form>

  <p class="psc-confirm" id="pscConfirm" aria-live="polite"></p>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), 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

Real animated count-up
An eased requestAnimationFrame loop climbs from the old to new total, not an instant jump.
Tabular-number digits
font-variant-numeric keeps digit widths fixed so the animation never jitters.
Goal-relative progress bar
A second, glanceable signal once the raw count is too large to register visually.
Validated sign form
Native required fields plus a JS guard ensure only genuine signatures count.
Personalized confirmation
The thank-you message uses the signer's first name.
Double-submit protection
The form disables and the button locks after a successful signature.
Accessible live region
aria-live="polite" announces the confirmation to screen readers.
Realistic demo seed
Starts mid-campaign at 18,742 rather than zero, matching how petitions actually look.

About this UI Snippet

Petition Signature Counter — A Count-Up Signature Widget With a Sign Form

Screenshot of the Petition Signature Counter snippet rendered live

A petition page lives or dies on momentum — a big, satisfying counter that visibly climbs when someone signs does more to encourage the next signature than any amount of persuasive copy. This snippet builds that: a large tabular-number counter, a name-and-email sign form, and a progress bar toward a stated goal, all in plain HTML, CSS, and vanilla JavaScript.

A real count-up, not an instant jump

The core interaction detail is that signing doesn't just set textContent to the new number — it runs countUp(), a requestAnimationFrame loop that eases from the old count to the new one over 900ms using a cubic ease-out. Even though a single signature only moves the number by one, the animated climb (paired with font-variant-numeric: tabular-nums so digits don't jitter sideways) is what makes the moment feel rewarding rather than a flat form-submit confirmation. For a reusable version of this pattern by itself, see count-up.

Goal-relative progress bar

Beneath the counter, a thin bar fills to count / GOAL, giving a second, complementary signal to the raw number — useful once a petition is past the point where the count alone is legible at a glance (25,000 versus 25,001 doesn't visually register, but a bar creeping toward full does).

A form that commits before it counts

Signing requires a name and email, validated with the browser's native required attributes plus a JS guard, before the counter increments — so the animation only fires on a genuine submission, and the confirmation message personalizes with the signer's first name. After signing, the form disables and the button locks to "Signed ✓" so a signer can't accidentally double-submit and inflate the count.

Accessible confirmation

The confirmation line carries aria-live="polite", so screen reader users hear the thank-you message as soon as it appears, without needing to navigate back to find it — important since the visual counter animation itself isn't announced.

Starting from a realistic in-progress count

The demo seeds count at 18,742 rather than zero, because that's how petitions actually look when someone lands on them — mid-campaign, with visible momentum already built. Swap it for zero if you're launching fresh.

Customizing it

Swap GOAL and the starting count for your real numbers, replace the demo submit handler with a call to your petition backend, and adjust the count-up duration and easing to taste. Pair it with a progress bar or live visitor counter for a companion widget.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSThe counter loads at 18,742 with a filled progress bar toward the 25,000 goal.
  2. 2
    Fill in name and emailBoth fields are required before the form can submit.
  3. 3
    Click "Sign this petition"The counter animates up by one with an eased count-up, and the bar advances.
  4. 4
    Read the confirmationA personalized thank-you message appears and the form locks to prevent double-signing.
  5. 5
    Set GOAL and the starting countMatch them to your real petition's numbers.
  6. 6
    Wire the submit handlerReplace the demo logic with a real API call, then trigger countUp() on success.

Real-world uses

Common Use Cases

Advocacy campaign pages
Make every signature feel like momentum, with an eased count-up that climbs from the old total to the new one the moment a supporter submits the form.
Community ballot initiatives
Pair with a donation thermometer so a local campaign can show both signatures gathered and funds raised on the same page.
Open letters and public statements
Show growing public support for a statement, with tabular-number digits keeping the counter from jittering as the figures change width.
Workplace and union organising
Track signed cards or pledges toward a stated goal, with a goal-relative progress bar for when the raw count becomes too large to judge.
Counter animation reference
Study the requestAnimationFrame loop and its easing, then compare it with the simpler number ticker when no form is involved.
Related: Usage-Based Billing Meter
See the Usage-Based Billing Meter for a related dashboards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

countUp() runs a requestAnimationFrame loop that tracks elapsed time against a fixed duration (900ms), computes a 0-to-1 progress value, applies a cubic ease-out curve to it, and renders the interpolated number on every frame until progress reaches 1. This produces a smooth climb from the old total to the new one rather than an instant text swap, which is what makes signing feel like an event.

Most fonts render digits at slightly different widths (a "1" is narrower than an "8"), which makes a rapidly changing number visually jitter left and right as digits swap. tabular-nums forces every digit to the same fixed width, so the counter's overall width stays stable and the count-up animation reads as a smooth climb rather than a wobbling one.

After a successful submission, every input in the form is disabled and the submit button is disabled and relabeled "Signed ✓", so the same browser session cannot submit again. This is a client-side UX safeguard, not a security measure — a real petition backend should also deduplicate by email or account server-side.

Replace the body of the submit handler: instead of just incrementing the local count variable, POST the name and email to your API, and on a successful response call countUp(count, newCount, 900) with the authoritative count your backend returns (which also protects against the count drifting if multiple people sign concurrently).

Keep count in component state and trigger the requestAnimationFrame loop inside an effect/lifecycle hook whenever a new target count is set (rather than re-rendering instantly), updating a separate "displayed count" state variable each frame. The form validation and confirmation logic map directly to controlled inputs and conditional rendering.