[#49] update Loading spinner #73
Conversation
kimispencer
changed the title
| , borderRadius: "50%" | ||
| , background: "linear-gradient(to right, " <> color <> " 10%, rgba(255, 255, 255, 0) 42%)" |
There was a problem hiding this comment.
Shouldn't we just fade from color with 100% opacity to color with 0% opacity? I think this would remove the need for specifying a background color to the loader.
There was a problem hiding this comment.
Did you by chance get to try this out @kimispencer ?
There was a problem hiding this comment.
Perhaps I am misunderstanding your comment, but the new design has a hard edge, and then fades at the end of the circle... I wasn't able to accomplish this one-directional fade on the border without using a linear-gradient and thus needed background. Let me know if you meant something else.
There was a problem hiding this comment.
Oh, sorry, I think I didn't explain myself properly. I thought of using border gradients for that, but it's just not possible. My main concern with this is that, since the background is a solid color, we won't be able to use loading spinners over text, otherwise this would happen:
Maybe we should use baked images or SVG for this, since we have a closed set of possible colors?
I don't think we'll be using loaders in all colors we offer, perhaps we should just stick to 2 or 3 colors? Would make this easier if we go down the image/SVG path.
There was a problem hiding this comment.
Yeah I was trying to use a CSS-only approach but it does result in the spinner not having an opaque/transparent center... I see your point that this might not look good over text. I think rather than a baked in image it would be more flexible (+ look cleaner as vector) using SVG. I'll implement a version using that approach 👍
| , borderRadius: "50%" | ||
| , background: "linear-gradient(to right, " <> color <> " 10%, rgba(255, 255, 255, 0) 42%)" |
There was a problem hiding this comment.
Oh, sorry, I think I didn't explain myself properly. I thought of using border gradients for that, but it's just not possible. My main concern with this is that, since the background is a solid color, we won't be able to use loading spinners over text, otherwise this would happen:
Maybe we should use baked images or SVG for this, since we have a closed set of possible colors?
I don't think we'll be using loaders in all colors we offer, perhaps we should just stick to 2 or 3 colors? Would make this easier if we go down the image/SVG path.
|
Note, new svg animation approach requires #82 to access SVG module |
|
#82 has been merged |
|
@kimispencer is this ready enough to include in the tooltip release? |
|
@spicydonuts yes, sorry for the delay! Let me update with our SVG stuff and should be ready to go :) |
Resolves #49