logoImejis.io

Progress Bar Maker (Free Image Generator)

imejis

imejis

@Imejis_io

#tutorials
Progress Bar Maker (Free Image Generator)

A progress bar maker takes a value and a max, your fill and track colors, and returns a PNG or SVG. A value of 72 against a max of 100 fills the bar to 72%. It's for goal, capacity, and completion visuals in emails, reports, and dashboards, all from a single number.

What a progress bar showsWhat a progress bar shows

A progress bar turns one number into a shape you can read at a glance. Two colors do the work. The fill shows how far along you are, and the track shows what's left. Set a value against a max and the fill lands where it should.

You get three shapes from the same value:

  • Linear bar: the classic left-to-right (or bottom-to-top) fill. Good for goals and completion.
  • Circular ring: a ring with the number in the middle. Good for social posts and badges.
  • Gauge: a half-circle, speedometer style. Good for scores, load, and capacity.

An optional label rides along. Show it as a percent (72%), a raw value (72), or a fraction (72/100), or hide it and let the shape speak. The point of the image is a snapshot a human reads, not a live control. It's a "we're 84% of the way there" panel in a newsletter, or a quota heads-up in a status report.

Make one freeMake one free

Open the progress bar maker. Set your value and max, choose the variant, pick the fill and track colors, and download. No signup, no watermark. Export a PNG for emails and docs, or an SVG when you want it crisp at any size.

The bar shrugs at what you're measuring. Fundraising totals, course completion, disk usage, an NPS score, all fine. A number and a max gets you a progress indicator.

Embed it anywhereEmbed it anywhere

A progress image embeds like any other image. One line of HTML and it renders inline:

<img
  src="https://your-render-url?value=84"
  alt="Fundraising goal at 84 percent"
  width="480"
/>

This next part earns its place. Feed the <img> a render URL instead of a saved file and the bar redraws on every load. Push a fresh value and the same URL returns an updated bar. Nothing to reopen, nothing to re-export. A goal tracker in a campaign update or a capacity bar in a dashboard keeps pace with the data.

Save a static file when you want a fixed snapshot. Use a render URL when the bar should follow a live number.

Generate at scaleGenerate at scale

One bar by hand is fine. Fifty, or one per user, is where you'll want the API.

Because progress runs as an API component, a bar is a component you configure once and render on demand. One call sets the value, and you can override the max, colors, and label format per render too. A few ways people wire it up:

  • On a schedule: a cron job reads today's total and drops a fresh goal bar into a digest.
  • Per request: your app renders each user's completion bar on the fly.
  • Through an AI agent over MCP: the agent gathers the number and calls the render itself.

The API docs have copy-ready examples, so the request shape is handed to you. Draw the bar once, then send it a number.

Start making progress barsStart making progress bars

One number, one bar.

The free plan covers 100 renders a month, enough to run a live goal tracker and see it arrive before you commit budget.

Frequently Asked Questions

Open a progress bar maker, set a value and a max, pick your fill and track colors, and download the result as a PNG or SVG. A value of 72 with a max of 100 fills the bar to 72%. No dashboard needed, just the number you already have.

Yes. The variant property switches between a linear bar (horizontal or vertical), a circular ring with the value in the center, and a half-circle gauge that looks like a speedometer. Same value, three shapes.

Turn on the value label and pick a format. 'percent' renders 72%, 'value' renders the raw 72, and 'fraction' renders 72/100. Turn the label off entirely if you just want the shape.

Yes. The max property sets what counts as full, so a value of 350 with a max of 500 fills the indicator to 70%. Handy for goal amounts, storage limits, and score scales that aren't percentages.

Yes. Progress is an API component, so one render call sets the value. Push a fresh number and the same render URL returns an updated bar, which is why it works well in a goal-tracker email or a status dashboard.
See all posts