-
Notifications
You must be signed in to change notification settings - Fork 3.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: ✨ new spinner component #3554
base: main
Are you sure you want to change the base?
Conversation
@flixlix is attempting to deploy a commit to the shadcn-pro Team on Vercel. A member of the Team first needs to authorize it. |
close #2766 |
{...props} | ||
> | ||
<div className="relative left-1/2 top-1/2 size-full"> | ||
{[...Array(12)].map((_, i) => ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
creating 12 divs inline seems like a funky way of achieving this, no?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah i'll admit it, that this doesn't seem like good practice, but to be fair this is how I saw most spinners from other design systems being implemented
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@cmawhorter any suggestions on how you would implement this?
... | ||
"spinner": { | ||
"0%": { opacity: 1 }, | ||
"to": { opacity: .15 } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@flixlix looks like something wrong here
and can you double check this
==> "0%":
==> "to":
I think It should be
spinner: {
from: { opacity: 1 },
to: { opacity: 0.15 },
},
but still I see the TS error Type 'number' is not assignable to type 'string'.ts(2322)
this is just a TS error the component works perfectly fine.
Screen.Recording.2024-04-20.at.15.17.22.mov