I have successfully implemented a loader feature where a loading animation is displayed upon clicking the submit button, indicating that the form submission is in progress. However, I am encountering an issue when trying to apply a blur effect to the entire page while keeping the loader unaffected by the blur. Any suggestions on how to achieve this?
I initially attempted to blur the body with the following CSS:
body.loading {
filter: blur(5px);
pointer-events: none;
}
Unfortunately, this resulted in the spinner being hidden entirely and the page turning into a white background. Below is my current code:
const myForm = document.getElementById("postForm");
myForm.addEventListener("submit", function(event) {
event.preventDefault();
const loader = document.querySelector(".loading");
loader.classList.add("visible");
document.body.classList.add("loading");
document.getElementById("submitbutton").disabled = true;
setTimeout(() => {
event.target.submit()
}, 1000);
})
body.loading {
filter: blur(5px);
pointer-events: none;
}
.loading {
display: flex;
justify-content: center;
visibility: none;
}
.loading::after {
content: "";
width: 50px;
height: 50px;
border: 10px solid #dddddd;
border-top-color: #009579;
border-radius: 50%;
animation: loading 1s linear infinite;
z-index: 1;
}
@keyframes loading {
to {
transform: rotate(1turn);
}
}
.visible {
visibility: visible;
}<button id="submitbutton" type="submit">Create
<div class="loading"></div>
</button>
<form id="postForm"></form>