Be able to pass in width/height as props

[taniryo-kun]

Hi! I just start using this library. I love the spinner design. Is there a way to change width/height? I wish to make my spinner more bigger in my project.

[KyleAMathews]

You can override the width/height with css.

[ghost]

this is a noob question but i modified height/width with css and nothing changed

[taniryo-kun]

@KyleAMathews thx for the reply! And sorry my question was not good. Because the title of the issue was "pass in as props"(and the issue was closed), I thought there might be a way to override the css value by using some api. Anyway I done the css override and it works fine, thank you.

@AHStudyBank i modified the following class. And it worked fine for me. (if you are using other shapes, modify .xxx-wrapper. ) .circle-wrapper { width: 80px; height: 80px; position: relative; }

[ghost]

do we apply the css styles to the parent container or the object????

Thank you in advance!

[ghost]

render: function(){
    console.log(this.state.movies);
    if(this.state.movies == ''){
        var movieResults =
  <div className="container">
    <h1 className="noResults">No Current Results</h1>
    <div className="circle-wrapper">
      <Spinner overrideSpinnerClassName="circle-wrapper" spinnerName="circle" />
    </div>
  </div>
    } else {
        var movieResults = <MovieResults movies={this.state.movies} />
    }

    return(
        <div>
            <SearchForm />
            {movieResults}
        </div>
    )
},

[ghost]

.circle-wrapper { width: 80px; height: 80px; position: relative; }

.noResults { color: rgba(172, 0, 15, 0.7); width: 400px; height: 100px; position: relative; left: 19%; }

[ghost]

Weird, I adjusted it by calling div.circle , I did not need to add an override class. Thanks anyways!!!

[arafay993]

Hi, Can anybody tell me where to include CSS. I have included spinner as following:

  <Suspense fallback={<Spinner name="pacman" color="steelblue" />}>
    <BrowserRouter basename="/app">
      <App/>
    </BrowserRouter>
  </Suspense>

But the problem is it is loading on top-left corner. I want it to appear on the center. Can anybody help me, please.

[arafay993]

Well I make it worked by doing this,

<Suspense fallback={<div className="loader">
  <Spinner name="pacman" noFadeIn color="steelblue" />
  </div>}>
    <BrowserRouter basename="/app">
      <App/>
    </BrowserRouter>
  </Suspense>

and then in my index.css, I did this.

.loader { 
  position: absolute; 
  top: calc(50% - 4em); 
  left: calc(50% - 4em); 
  width: 6em; 
  height: 6em; 
}