---
title: "New Components - Progress Bars, Rings, Gauges & Ratings"
description: "Show goals, scores and reviews as pixels. Progress comes as a bar, ring or gauge; ratings come as stars, hearts, or any emoji, with fractional fills."
url: "https://www.imejis.io/changelogs/progress-rating-components"
image: "https://www.imejis.io/images/changelogs/progress-rating-components.png"
published: "2026-07-19"
author: "imejis"
---

# New Components - Progress Bars, Rings, Gauges & Ratings

## New Components: Progress Bars, Rings, Gauges & Ratings

Two more components joined the palette, both built for one job: turning a number into something you understand at a glance.

### The progress component

One component, three shapes. A linear bar (horizontal or vertical), a circular ring with the value in the center, or a half-circle gauge for that speedometer look. The label can show a percent (72%), the raw value, or a fraction (72/100), and `max` defaults to 100 so plain values read as percentages out of the box.

Colors, thickness, and rounded ends are all yours to set. Goal trackers, capacity meters, course completion cards, fundraiser thermometers.

### The rating component

A row of icons filled to a value. Stars by default, but hearts, circles, any emoji, or your own SVG path work too. Fractional values fill the last icon exactly, by halves, or rounded, so a 4.5-star review actually looks like 4.5 stars.

A few details we're glad we got right:

- **Not limited to 5.** A ten-point scale with an "8.6/10" label works fine, and so does a "7 of 10" tally.
- **Optional numeric label** in decimal (4.5), fraction (4.5/5), or count (4 of 5) form.
- **Grid wrapping** with `perRow`, for when 20 icons shouldn't sit in one line.

### Dynamic, of course

Both components take a live value per render. Pass `"score": 4.5` or `"goal.value": 68` to the render endpoint and the image updates. One review-card template can render every product in your catalog with its real rating.

Play with them on the [progress](/components/progress) and [rating](/components/rating) component pages, live previews and copyable API requests included.