Circular progress

Progress styletype: "progress"

Generate circular progress rings with the percentage centered inside, updated on every API call. Create progress ring images free with Imejis today.

Edit it — this is the actual editor panel

Design JSON — “Circular” variant

{
  "title": "Progress sample",
  "description": "A dynamic progress bar",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-progress",
      "key": "completion",
      "type": "progress",
      "position": {
        "x": 300,
        "y": 110
      },
      "rotation": 0,
      "size": {
        "width": 200,
        "height": 200
      },
      "dynamic": true,
      "properties": {
        "value": 72,
        "max": 100,
        "variant": "circular",
        "orientation": "horizontal",
        "fillColor": "#4F46E5",
        "trackColor": "#E5E7EB",
        "rounded": true,
        "showValue": true,
        "valueFormat": "percent",
        "valueColor": "#374151",
        "opacity": 1,
        "thickness": 16
      }
    }
  ]
}

Progress examples

Real renders of the circular progress — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

Fitness goal ring

A 76% daily activity ring in green on a dark canvas — workout recap style.

API overrides for this example

{
  "completion.variant": "circular",
  "completion.showValue": true,
  "completion.thickness": 16,
  "completion.value": 76,
  "completion.fillColor": "#22C55E",
  "completion.trackColor": "#1E293B",
  "completion.valueColor": "#F8FAFC"
}

Disk usage badge

A red 92% ring flagging a nearly full volume in a monitoring digest.

API overrides for this example

{
  "completion.variant": "circular",
  "completion.showValue": true,
  "completion.thickness": 16,
  "completion.value": 92,
  "completion.fillColor": "#EF4444",
  "completion.valueColor": "#B91C1C"
}

When to use the circular style

Goal completion rings for social posts
Fitness and habit tracker recaps
Storage or quota usage badges

Use it dynamically via the API

Drive the bar with '<key>.value' (or just '<key>'); max, fill/track colors and valueFormat are overridable per render.

Full API request with this variant's current values — the playground above sends only the properties you change

curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
    "completion.value": 72,
    "completion.max": 100,
    "completion.variant": "circular",
    "completion.orientation": "horizontal",
    "completion.fillColor": "#4F46E5",
    "completion.trackColor": "#E5E7EB",
    "completion.rounded": true,
    "completion.showValue": true,
    "completion.valueFormat": "percent",
    "completion.valueColor": "#374151",
    "completion.opacity": 1,
    "completion.thickness": 16
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Other progress styles

DefaultCircularGauge Vertical bar

See the progress component page for the full property reference and FAQs.