How to add a loading animation when a button is clicked

I'm setting up a website and when a button is clicked, I would like a loading animation to appear. I already have the entire screen blur when the button is clicked, now I would like a "spinner" animation to go on top of that while the page loads.

Here is what i have so far js file:

class App extends React.Component {

    state = { fadingOut: false }
    fadeOut = () => this.setState({fadingOut: true});


    render() {
        return (
            <div className="App" style={this.state.fadingOut ? {filter: 'blur(0.35vw)'} : undefined }
            <div class="loader"></div>
            > 

                <div className="top-bar">

                <div className="title">
                    .datapoems
                </div>

                <img className="logo" src="./logo.png"/>

                </div>

                <div className="container">
                    <div className="sloganLineOne">Poem Theme</div>
                    <div className="sloganLineTwo">Detector</div>
                    <textarea className="inputField" placeholder="Please Enter Your Poem Here..."></textarea>
                    <button className="button" onClick={this.fadeOut}>Enter</button>
                    <img className="leftTriangle" src="./leftSideTriangle.png"/>
                    <img className="rightTriangle" src="./rightSideTriangle.png"/>
                </div>
            </div>
        );
    }
}

scss file:

.loader {
                border: 16px solid #f3f3f3;
                border-radius: 50%;
                border-top: 16px solid blue;
                border-bottom: 16px solid blue;
                width: 120px;
                height: 120px;
                -webkit-animation: spin 2s linear infinite;
                animation: spin 2s linear infinite;
              }

              @-webkit-keyframes spin {
                0% { -webkit-transform: rotate(0deg); }
                100% { -webkit-transform: rotate(360deg); }
              }

              @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
              }

I expect the loading circle to go above the blur effect when the button is clicked.