radix-ui / themes

Radix Themes is an open-source component library optimized for fast development, easy maintenance, and accessibility. Maintained by @workos.

Home Page:https://radix-ui.com/themes

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Spinner] Any way to change color and size ?

yukiyohure opened this issue · comments

I'd like to make the spinner bigger than the given option size which is 20px * 20px with 100% scaling.
And change the color of it.

Thank you.

You can override width, height, and color via the regular style prop if size and color props don't work for you.

How large is your target size though and what does your design look like?

@vladmoroz
I guess I didn't read the documentation properly...
By "style prop", do you mean regular CSS? I'm using CSS Modules on Next.js Pages Router.

How large is your target size though and what does your design look like?

The target size is 40px * 40px for the page content loading.
The design is the same as the provided Spinner component from Radix-UI Themes except for the color, which is #027FFF.

Yeah, with regular CSS

We'll consider adding more sizes but this should work in the meantime

@vladmoroz
I made it with regular CSS 😄

spinner-size-example-video.mov

We'll consider adding more sizes but this should work in the meantime

That's good news!
The capability of adjusting the Spinner size via props would be a handy option.

Guess this can be closed