How to put a spinner inside of the button in React? - reactjs

Question

See current Spinner
Hello,
I like to put the current spinner inside the Login button, but it is located outside of the button. Any help? Thank you in advance!
Here are my codes.
[Login.js] try to load when user clicks the Login button.
...
<div className="auth-form-inputLine auth-form-submitBtn-container" id="auth-login-submitBtnContainer">
<button onClick={this.handleFormSubmit} className="auth-form-submitBtn">
{this.state.submitting ? <ButtonLoader /> : <h2 className="text">Login</h2>}
</button>
</div>
...
[ButtonLoader.js] There are moving three dots.
import React from "react";
import "./styles/ButtonLoader.css";
const ButtonLoader = () => {
return (
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
);
};
export default ButtonLoader;
[ButtonLoader.css]
.spinner {
margin: 100px auto 0;
width: 70px;
text-align: center;
}
.spinner > div {
width: 18px;
height: 18px;
background-color: #333;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
#-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}
#keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}