HTML Meter Generator
Generate a <meter> gauge — set the min/max range, current value, and the low/high/optimum thresholds, then copy the ready-to-use HTML. Free, instant, no AI involved.
Input
Settings
Values below this are considered low.
Values above this are considered high.
The ideal value. Browsers color the gauge by how far the value is from it.
Add custom CSS classes to the element. Separate multiple classes with spaces.
Output
Your element will appear here.
More ways to use this tool
REST API
curl -X POST https://api.iotools.cloud/v1/tool/html-generator/meter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"customMin": "0",
"customMax": "100",
"customValue": "60",
"customLabel": "",
"customLow": "",
"customHigh": "",
"customOptimum": "",
"customClasses": ""
}'Swap in your own key from your account. The tool's fields are the body — no wrapper.
Ask an AI agent
Use the IOTools `html-generator__meter` tool (HTML Meter Generator) on this input:
YOUR_INPUT_HEREPaste this at any agent connected to the IOTools MCP server, then add your input.
Embed widget
<iframe
src="https://iotools.cloud/embed/html-generator/meter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="HTML Meter Generator — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Drop this into your own page — free, no key required, just a link back.
| Cost per API/MCP call | From 5 credits |
|---|---|
| Need more credits? | View pricing |
Also available with
Guides
Build a ready-to-paste <meter> gauge — set the range, the current value, and the optional low/high/optimum thresholds, then copy the generated HTML.
Runs entirely in your browser: no AI call, no credits, no network round-trip. The output updates instantly as you type.
How to use it
- Set Min Value, Max Value and Current Value.
- Optionally add a Label and the Low, High and Optimum thresholds. Browsers color the gauge green, yellow or red depending on where the value falls relative to them.
- Copy or download the generated HTML.
Meter or progress bar?
Use <meter> for a measurement within a known range (disk usage, a score, a battery level). Use <progress> for the completion of a task — see the HTML Progress Bar Generator.
Why is there no live preview?
The output is real, unsanitized markup — rendering it directly on the page isn't safe. Paste the code into your own page to see it in context.