Changing colors

[refayathaque]

Hi Connor,

Thank you for building this fantastic library, I've had a lot of fun incorporating it into my application. Connor I wanted to ask you how we can change the color of the loaders. I've actually gone to the trouble of changing the code in the loaders.min.css file to .ball-pulse-sync>div,.ball-pulse>div{width:15px;height:15px;margin:2px;display:inline-block}.ball-pulse-sync>div,.ball-pulse>div,.ball-scale>div{background-color:#2F2F2F;border-radius:100%}@-webkit-keyframes scale{0%,80%{-webkit-transform:scale(1);transform:scale(1);opacity:1}45%{-webkit-transform:scale(.1);transform:scale(.1);opacity:.7}}@keyframes. The background color by default is #fff (white) I believe. This has worked when I am running the react application in the dev environment locally, however, once my application codebase is minified with webpack and deployed, this is not working. Any ideas why? Is there another way for us to make css changes to the loaders.min.css file?

Thank you,

[refayathaque]

Ok so I figured it out. If you're using react you should set a style in your constructor.

constructor(props) { super(props); this.loaderStyle = { backgroundColor: "#363636" }; }

The call the style in each individual div for each circle

`render() { if (this.props.isLoading) { return

{/ div must be in same line as return or errors out /}

            <div style={this.loaderStyle}></div>
            <div style={this.loaderStyle}></div>
        </div>;
    } }`