webdevpuneet.com

Related Snippets

144 in Dashboards category
1–6 of 60

Metric KPI Card Grid

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

Rate Limit Status Panel — Free API Quota Dashboard Snippet

Rate Limit Status Panel · Dashboards · Plain HTML, CSS & JS · Live preview

CategoryDashboards
TagsSVGDashboard UI

Copy & paste

Source Code

<div class="rlp-card">
  <div class="rlp-top">
    <div class="rlp-ring-wrap">
      <svg class="rlp-ring" viewBox="0 0 120 120">
        <circle class="rlp-ring-bg" cx="60" cy="60" r="52"/>
        <circle class="rlp-ring-fg" id="rlpRingFg" cx="60" cy="60" r="52"/>
      </svg>
      <div class="rlp-ring-label">
        <span class="rlp-ring-num" id="rlpRemaining">640</span>
        <span class="rlp-ring-sub">left</span>
      </div>
    </div>

    <div class="rlp-info">
      <h3>API rate limit</h3>
      <p><span id="rlpUsed">360</span> / <span id="rlpTotal">1,000</span> requests used</p>
      <div class="rlp-reset">Resets in <b id="rlpCountdown">14:59</b></div>
    </div>
  </div>

  <button type="button" class="rlp-simulate" id="rlpSimulate">Simulate request burst</button>

  <div class="rlp-recent">
    <div class="rlp-recent-head">Recent requests</div>
    <div class="rlp-recent-list" id="rlpRecentList">
      <div class="rlp-empty" id="rlpEmpty">No requests yet.</div>
    </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), 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

SVG progress ring
stroke-dashoffset animates a proportional arc with no canvas or chart library.
Threshold-based ring color
Indigo, amber, and red states share the same tier logic as the usage text.
Live one-second countdown
A real interval ticks down to the next rate-limit window reset.
Genuine window reset
Reaching zero wraps the countdown and zeroes usage, mirroring real rate limiters.
Burst-style simulation
Requests arrive in randomized clusters, not one at a time, matching real workloads.
Recent request log
Logs a representative endpoint call per simulated burst, most recent first.
Capped, scrollable log
Older entries drop off once the log exceeds a handful of items.
No dependencies
Pure HTML, CSS, and vanilla JavaScript.

About this UI Snippet

Rate Limit Status Panel — Usage Ring, Reset Countdown, and Recent Request Log

Screenshot of the Rate Limit Status Panel snippet rendered live

Every API product needs to show developers exactly where they stand against their rate limit — not after they get a 429, but continuously, so they can pace their own requests. This snippet builds that panel in plain HTML, CSS, and vanilla JavaScript: a circular usage ring, a live countdown to the next reset, a "simulate request burst" button, and a scrolling log of recent calls.

An SVG ring driven by stroke-dashoffset

The ring is a single SVG circle whose stroke-dasharray is fixed to its circumference and whose stroke-dashoffset is animated to reveal a proportional arc — the standard technique for a CSS/SVG progress ring with no canvas or chart library. The ring's color shifts from indigo to amber to red at the same 75%/95% thresholds used elsewhere in this snippet, so the ring, the request count, and the "requests used" text can never visually disagree.

A countdown that actually resets state

The reset countdown runs on a real one-second setInterval, and when it reaches zero, it wraps back to a fresh window (900 seconds here, standing in for a 15-minute rate-limit window) *and* zeroes the used-request count, mirroring how token-bucket and fixed-window rate limiters actually behave — the panel doesn't just show a countdown for show, it demonstrates the limit genuinely resetting.

Request burst simulation, not a slider

Like a real API workload, usage doesn't arrive smoothly — it comes in bursts (batch jobs, retries, background sync). The "Simulate request burst" button adds a randomized cluster of requests per click rather than one at a time, which is closer to how a developer would actually watch their limit climb, and each click also logs one representative endpoint call to the recent-requests list.

Where this fits in a developer product

Pair it with a webhook event tester so developers can both test their integration and watch their quota simultaneously, or place it next to an AI token usage meter — the rate limit panel tracks request *frequency* within a short window while the token meter tracks *volume* across a billing period, two related but distinct constraints on an AI API.

Customizing it

Replace the simulated burst with real request counts read from your API client's response headers (most APIs return X-RateLimit-Remaining and X-RateLimit-Reset), adjust the window length and limit to match your actual API, or add a second ring for a longer-period limit alongside this short-window one.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA rate limit panel renders with a usage ring at 360/1,000 requests and a live countdown.
  2. 2
    Watch the countdownIt ticks down every second and wraps to a fresh window when it reaches zero, resetting usage.
  3. 3
    Click Simulate request burstA randomized cluster of requests adds to the used count and the ring fills accordingly.
  4. 4
    Watch the ring color shiftPast 75% usage the ring turns amber; past 95% it turns red.
  5. 5
    Check the recent requests logEach simulated burst logs one representative endpoint call with a timestamp.
  6. 6
    Wire up real dataRead actual rate-limit headers from your API responses to drive used and resetSeconds.

Real-world uses

Common Use Cases

API developer portals
Show developers where they stand against their limit before they hit a 429, with a ring that turns indigo, amber or red by usage tier.
AI API consoles
Pair with an AI token usage meter so developers see both request pacing and token consumption together.
Integration test sessions
Watch quota drain while running a suite of calls, with a log of recent requests and a live one-second countdown to the next reset.
Webhook and tooling dashboards
Place beside a webhook event tester so test sends and their effect on quota are visible on one page.
Plan comparison and upgrade pages
Show current limits next to an AI model comparison table, with a genuine window reset that zeroes usage when the countdown hits zero.

Got questions?

Frequently Asked Questions

The ring circle has a fixed stroke-dasharray equal to its own circumference, which splits its stroke into one dash covering the whole circle and one gap of zero length. Animating stroke-dashoffset shifts where that dash starts, visually revealing an arc proportional to whatever percentage you set — a well-known CSS/SVG technique that needs no dependencies.

Real API rate limiters work on fixed or rolling windows — once the window closes, your quota genuinely refills. Making the countdown wrap and zero the used count when it reaches zero demonstrates that real behavior, rather than just running a countdown for decoration disconnected from the usage ring.

Real API usage rarely arrives one call at a time — it comes in clusters from batch jobs, retries, or background syncs. Adding a randomized cluster per click gives a more realistic sense of how quickly a rate limit can be consumed than a steady one-by-one increment would.

Most REST APIs return headers like X-RateLimit-Remaining, X-RateLimit-Limit, and X-RateLimit-Reset (a Unix timestamp) with every response. Read those headers after each real request, compute used as limit minus remaining, compute resetSeconds as the reset timestamp minus the current time, and call render() to update the ring and countdown.

Track used and resetSeconds as component state, derive the tier and ring offset with a computed value, and drive the countdown with a setInterval inside a mount effect (cleaned up on unmount). Update the state directly from your API client's response headers instead of the simulated burst handler.