fix: Clean loading spinner rendering #6444
Conversation
|
Thanks for the PR! 🎉 We've deployed an automatic preview for this PR - you can see your changes here:
Note The build needs to finish before your changes are deployed. |
dbatiste
left a comment
dbatiste
left a comment
There was a problem hiding this comment.
Seems ok to me. I barely noticed the width change with the previous version.
| .outer-circle-blur { | ||
| fill: black; | ||
| filter: blur(calc(var(--d2l-loading-spinner-size, 50px) / 10)); | ||
| opacity: 0.1; | ||
| stroke: none; | ||
| } |
There was a problem hiding this comment.
One thing I'm seeing on Windows is that this blur causes a bit of a darker box around the spinner. Tried to capture it better here by changing the background colour:
There was a problem hiding this comment.
Unless I'm imagining it, I can clearly see it in this picture:
There was a problem hiding this comment.
The animation is now much smoother though, on all three of my monitors while zoomed and at 100%
There was a problem hiding this comment.
Can we set a transparent fill? For example, with transparent, or #00000000?
There was a problem hiding this comment.
Nvm... that sorta defeats the original purpose of this.
There was a problem hiding this comment.
Maybe something better could be done with a radial gradiant. My quick test was kinda harsh... but maybe possible to avoid what Stacey noticed.
ex. applied to the svg and removing the blur stuff: background: radial-gradient(#000000 0%, transparent 58%);
JIRA