size change

[iBasit]

How can we change the size to make it bigger?

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

[fxfactorial]

@iBasit this is simple CSS,

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

[chulanovskyi]

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

@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;

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]

In case you use styled components:

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