refactor ProgressRadial to use pseudo-elements
#1356
Conversation
mayank99
changed the title
ProgressRadial to use pseudo-elements
| } | ||
| &::after { | ||
| mask-image: conic-gradient(#0000, #000), linear-gradient(#000 0 0); | ||
| animation: rotate-indeterminate 0.8s linear infinite; |
There was a problem hiding this comment.
we might want to use a custom cubic-bezier easing instead of linear
There was a problem hiding this comment.
also, because this is a gradient now, i'm not exactly sure how to handle forced-colors mode 🤔
There was a problem hiding this comment.
I like this slight ease-in-out cubic-bezier: https://cubic-bezier.com/#.6,.4,.4,.6
There was a problem hiding this comment.
And yes, forced-colors mode is a bit strange. It doesn't work at all for linnear
There was a problem hiding this comment.
Changed the easing
Screen.Recording.2023-06-16.at.9.15.39.AM.mov
There was a problem hiding this comment.
i think i fixed forced-colors. have a look
mayank99
requested review from
adamhock and
FlyersPh9
and removed request for
a team
|
Once the indeterminate radial progress indicator completes or hits an error, it probably should not animate anymore. I would expect something more like this: |
|
Probably does not belong in this PR, but this example: should the spinner itself be a button to pause the upload? Or nest a borderless button within the spinner? |
Shouldn't that be left up to the user though? e.g. Start with
The user can pass anything inside, so this should be possible: <ProgressRadial>
<IconButton styleType='borderless' size='small' aria-label='Pause'>
<SvgPause />
</IconButton>
</ProgressRadial> |
| } | ||
| &::after { | ||
| mask-image: conic-gradient(#0000, #000), linear-gradient(#000 0 0); | ||
| animation: rotate-indeterminate 0.8s linear infinite; |
There was a problem hiding this comment.
I like this slight ease-in-out cubic-bezier: https://cubic-bezier.com/#.6,.4,.4,.6
| So 25% is stroke-dashoffset: 66; or stroke-dashoffset: calc(88 - 88 | ||
| * 25 / 100); | ||
| For determinate variants, percentage is set by | ||
| <code>--iui-progress-percentage</code>. | ||
| </p> | ||
| <br /> | ||
|
|
||
| <div id="radial-size-large"> | ||
| <!-- Small determinate --> |
There was a problem hiding this comment.
Doesn't necessarily relate to your changes, but this might be a good time to change the comments from "Small" to "Large" for all of the large determinate examples?
Changes
Instead of using an svg, the radial progress indicator will now use pseudo-elements with a combination of conic and linear gradients. Based on this example: https://css-tricks.com/single-element-loaders-the-spinner/#aa-more-loader-examples
--iui-progress-percentage.Testing
Html preview: https://itwin.github.io/iTwinUI/1356/css/progress-indicator.html
Screen.Recording.2023-06-14.at.5.36.12.PM.mov
Storybook preview: https://itwin.github.io/iTwinUI/1356/react/?path=/story/progressindicators-progressradial--indeterminate
Screen.Recording.2023-06-14.at.5.03.33.PM.mov
Unit/visual tests updated.
Docs
Changeset added.
Briefly mentioned in migration guide: https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v3-migration-guide#progressradial--progresslinear