`CircularProgress` & `LinearProgress` visual styling by FlyersPh9 · Pull Request #1594 · iTwin/stratakit

FlyersPh9 · 2026-06-30T20:25:26Z

Changes

Apply correct colors.
Applied rounded corners.
Introduce thickness variables for track and fill.
Split Progress.md into CircularProgress.md & LinearProgress.md.
Updated documentation + demos for Colors & Determinate (extracted from Demos for iTwinUI feature parity #1592).
CircularProgress:
- enableTrackSlot defaults to true.
LinearProgress:
- Added end marker when variant is set to "buffer" or "determinate".

CircularProgress Deploy preview 👀
CircularProgress documentation 📚
LinearProgress Deploy preview 👀
LinearProgress documentation 📚

Component	Theme	Before	After
`CircularProgress`	Light
`CircularProgress`	Dark
`CircularProgress`	`forced-colors`
`LinearProgress`	Light
`LinearProgress`	Dark
`LinearProgress`	`forced-colors`

Testing

Light, dark, forced-colors.
All color options.
All variants.

mayank99 · 2026-07-02T21:18:44Z

I'm noticing some visual artifacting around the edges in CircularProgress.

(This may have been present before, but it's definitely more pronounced now.)

Can you check if ba6771c is helping? I can't seem to reproduce. Are you by any chance viewing the visual artifacting on a retina display?

That did not seem to make a difference. I'm on a normal 2560x1440 display.

I saw similar artifacting in your screenshots in the other thread.

It's probably because of fractional values. Do we have any control over the sizing?

CircularProgress accepts:

size

thickness

Without changing those props, the <svg> is displaying at 40px, but the <circle>s display at 36.73px. Perhaps we can solve it by changing thickness.

I would prefer to tackle pre-defined size + thickness in a separate PR.

Could start working on that PR in parallel. It seems like an important part of fixing the visual styling (which this PR is trying to do).

Edit: What I mean is fixing the default size + thickness, not adding new predetermined sizes.

Thickness has been adjusted, but visual artifacting is unfortunately still noticeable (the curves look "jagged").

Not a blocker; just wanted to update this thread on the latest state.

FlyersPh9 · 2026-07-07T19:22:46Z

I think I'd prefer separate documentation pages per component.

Yep, we can split

Split in cbaf3f2.

Added color documentation & simplified demos in 8609725.

Added determinate documentation & extracted demos from Demos for iTwinUI feature parity #1592 in 2d26aec.

I think we'll need to take a closer look at the determinate demos.

Check for broken links now that /components/progress no longer exists.

And yeah, I don't feel confident in those determinate demos.

Check for broken links now that /components/progress no longer exists.

Fixed anchors pointing to old progress docs URL in 1f03f4d.

And yeah, I don't feel confident in those determinate demos.

The things I am uncertain about:

The extra code to get the progress bar to increase from 0-100% bloats the file while the focus should be on just the component and it's props.

aria-labelledby is tied only to "Uploading…", does not include the %.

The CircularProgress requires an absolute positioned box to get the percentage centered.

Today we agreed to simplify the determinate examples to show the most basic usage.

Simplified determinate examples in f8a5294.

Updated the determinate examples in 7c94fa9 to show the percentage but left out the animation.

mayank99 · 2026-07-24T20:33:09Z

Setting color to something other than "primary" or "secondary" makes the progress indicators invisible.

Is it caused by this PR? Then we should fix it before merging.

Evaluating color values can be done separately in #1577.

FlyersPh9 · 2026-07-24T20:47:27Z

Setting color to something other than "primary" or "secondary" makes the progress indicators invisible.

Is it caused by this PR?

Yes it is, this is from the main branch setting color="error".

Screenshots (from main branch)

What I think I should do is apply --stratakit-color-icon-*-base to all the different colors. We don't need to show these in the demos (at least not immediately until we know what colors we actually want to suggest).
Another option is remove those color options.

EDIT: colors added in 9cc0a75.

…ck for track height

…ess-bar2 when variant=buffer height

Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com>

mayank99 · 2026-07-27T19:13:17Z

Top image is at 100% scale, bottom at 250%. Progress bars in each are uploading and buffering

I'm seeing different colors in the two images, possibly because the code was updated as you were capturing the screenshots. Could you re-capture the latest state just to be sure? @angrycat9000

Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com>

angrycat9000 · 2026-07-27T19:25:10Z

Top image is at 100% scale, bottom at 250%. Progress bars in each are uploading and buffering

I'm seeing different colors in the two images, possibly because the code was updated as you were capturing the screenshots. Could you re-capture the latest state just to be sure? @angrycat9000

mayank99 · 2026-07-27T19:28:14Z

😕 Still seeing different colors in those two images. It's very strange that zooming would change the colors.

For comparison, this is MS Edge on macOS:

Colors and centering both look correct.

mayank99

This seems good to go. Since it is a somewhat big change, it might be wise to wait for some of the regression fixes to be released in #1660 first.

Initial commit

d488feb

FlyersPh9 self-assigned this Jun 30, 2026

github-actions Bot added documentation pkg: @stratakit/mui labels Jun 30, 2026

FlyersPh9 marked this pull request as ready for review June 30, 2026 20:40

FlyersPh9 requested a review from a team as a code owner June 30, 2026 20:40

FlyersPh9 requested review from GerardasB, angrycat9000 and mayank99 and removed request for a team June 30, 2026 20:40

This comment was marked as resolved.

Sign in to view

mayank99 reviewed Jul 2, 2026

View reviewed changes

FlyersPh9 added 6 commits July 6, 2026 09:54

Attempt to fix visual artifacting

ba6771c

Use neutral color instead of mono

d8bc772

Border color for track, icon color for fill

e811588

Revert ba6771c

b86eac4

Determinate LinearProgress has end indicator

51815e4

Merge branch 'main' into jon/progress-colors

ad07d5a

FlyersPh9 commented Jul 7, 2026

View reviewed changes

FlyersPh9 added 7 commits July 7, 2026 15:23

Mention end marker in docs

21d8031

Split Progress.md into 2 files

cbaf3f2

Add color documentation and simplify demo.

8609725

Add determinate documentation and demo.

2d26aec

Update anchors to new progress docs.

1f03f4d

Simplify determinate demos

f8a5294

Merge branch 'main' into jon/progress-colors

a004452

mayank99 reviewed Jul 8, 2026

View reviewed changes

Comment thread packages/mui/src/~components/MuiLinearProgress.css

FlyersPh9 added 2 commits July 8, 2026 15:49

Add support for buffer variant

96d9c61

Merge branch 'main' into jon/progress-colors

671fd08

Merge branch 'main' into jon/progress-colors

4ef2862

Add error, warning, info, success colors in CSS.

9cc0a75

mayank99 reviewed Jul 24, 2026

View reviewed changes

Comment thread packages/mui/src/~createTheme.tsx Outdated

Comment thread packages/mui/src/~components/MuiLinearProgress.css Outdated

Comment thread packages/mui/src/~components/MuiLinearProgress.css Outdated

mayank99 reviewed Jul 24, 2026

View reviewed changes

Comment thread packages/mui/src/~components/MuiCircularProgress.css

Comment thread packages/mui/src/~createTheme.tsx

FlyersPh9 added 9 commits July 24, 2026 17:27

Change thickness to 5

61ab7ef

Use accent base color

4401d88

Oops, that wasn't supposed to be there

aceb5c7

Use inset-block-start, translate, and block-size instead of inset-blo…

14e0a87

…ck for track height

Use strong color only for primary

77644b2

Use strong color only for primary (circular)

9dc22d3

Merge branch 'main' into jon/progress-colors

2691f5f

Clean up buffer dashed line

55621f6

Use inset-block-start and block-size instead of inset-block for progr…

0af89fe

…ess-bar2 when variant=buffer height

This comment was marked as outdated.

Sign in to view

mayank99 reviewed Jul 27, 2026

View reviewed changes

Comment thread packages/mui/src/~components/MuiLinearProgress.css Outdated

Update packages/mui/src/~components/MuiLinearProgress.css

a976f2e

Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com>

mayank99 reviewed Jul 27, 2026

View reviewed changes

min-width on linear progress docs demos

d8dfa20

Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com>

Merge branch 'main' into jon/progress-colors

ebacbe1

FlyersPh9 mentioned this pull request Jul 28, 2026

CircularProgress prop deprecation #1663

Draft

Merge branch 'main' into jon/progress-colors

e9a6901

mayank99 reviewed Jul 28, 2026

View reviewed changes

Comment thread apps/website/src/content/docs/components/mui/CircularProgress.md

Update jsdocs for CircularProgress

4262a77

mayank99 approved these changes Jul 28, 2026

View reviewed changes

FlyersPh9 mentioned this pull request Jul 30, 2026

LinearProgress prop deprecation #1673

Draft

Uh oh!

Conversation

FlyersPh9 commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Testing

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mayank99 Jul 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

FlyersPh9 Jul 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mayank99 commented Jul 24, 2026

Uh oh!

FlyersPh9 commented Jul 24, 2026 • edited by mayank99 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

mayank99 commented Jul 27, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

angrycat9000 commented Jul 27, 2026

Uh oh!

mayank99 commented Jul 27, 2026

Uh oh!

Uh oh!

mayank99 left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

FlyersPh9 commented Jun 30, 2026 •

edited

Loading

mayank99 Jul 7, 2026 •

edited

Loading

FlyersPh9 Jul 7, 2026 •

edited

Loading

FlyersPh9 commented Jul 24, 2026 •

edited by mayank99

Loading