Как добавить анимацию загрузки при нажатии кнопки? ⇐ CSS

[Anonymous]

На моем веб-сайте при нажатии кнопки экран размывается. Сейчас я пытаюсь добавить анимацию загрузки вращающегося круга поверх этого размытия при нажатии кнопки, однако у меня возникает множество проблем. Когда я попытался также сделать так, чтобы нажатие кнопки имело «isActive», а затем сделать div класса загрузчика, когда он активен, весь веб-сайт разбился.
Код файла js:
import React from "react";
import "./App.scss";

class App extends React.Component {

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

render() {
return (
'blur(0.35vw)'} : undefined }
>




.datapoems





Poem Theme
Detector

Enter




);
}
}

export default App;

Код загрузчика scss:
.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); }
}


Подробнее здесь: https://stackoverflow.com/questions/565 ... is-clicked