Skip to content
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

size change #63

Open
iBasit opened this issue Dec 7, 2017 · 3 comments
Open

size change #63

iBasit opened this issue Dec 7, 2017 · 3 comments

Comments

@iBasit
Copy link

iBasit commented Dec 7, 2017

How can we change the size to make it bigger?

Maybe few predefined sizes would be good (small, medium, large, x-large)?

@fxfactorial
Copy link

@iBasit this is simple CSS,

.sk-spinner {
  transform: scale(2);
}

@chulanovskyi
Copy link

chulanovskyi commented Apr 1, 2018

@fxfactorial The "scale" wouldn't work, because it will lead to crucial loss of quality:

scale

@iBasit Instead, you could rewrite the spinner class, that you using, width and height attributes.
In my app I'm using <Spinner name="circle"/> and have customized it with:

.sk-circle {
    width: 100px;
    height: 100px;

widthHeight

And, of course, you should wrap this customization with another class so it won't apply for the every spinner in your app

!UPDATES:
Some types (like "ball-clip-rotate") may contain an additional wrapper, so they should to be overwritten like this:

.sk-circle > div {
    width: 100px;
    height: 100px;

@flogy
Copy link

flogy commented Jan 22, 2021

In case you use styled components:

const LargeSpinner = styled(Spinner)`
  & > div {
    width: 140px;
    height: 140px;
  }
`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants