How to stop/start CSS animation
Background-Info
I'm trying to make a loader for my website where when someone makes a search to my API it will popup the loader then after the table gets built it will stop the loading animation. I'm not good with javascript and I'm just trying to create this side project so I don't completely know how this stuff works. I did see another stack overflow post about this topic but it didn't apply to me because the way they called the CSS animation was different
I followed a tutorial for this loader here he shows how to stop it but he doesn't show how to start it, but it doesn't stop for me
What I tried
Like I was saying above I'm not good with javascript so I wasn't sure what i should try but like in the video I tried to make the CSS display = None and also i tried to remove the HTML entirely ( you can see it below in the code)
End goal
My end goal is to have a javascript function like start_loading() and stop_loading() I can call to stop and start the loading at any time
Code
function start_load() {
let spinnerWrapper = document.querySelector('.spinner-wrapper')
console.log(document.querySelector('.spinner-wrapper'))
window.addEventListener('load', function() {
spinnerWrapper.style.display = 'none';
// spinnerWrapper.parentElement.removeChild(spinnerWrapper)
});
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
.spinner-wrapper {
width: 100%;
height: 100%;
/* background-color: #151515; */
position: absolute;
top: 0;
left: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.spinner {
position: relative;
width: 8rem;
height: 8rem;
border-radius: 50%;
}
.spinner::before,
.spinner:after {
content: "";
position: absolute;
border-radius: 50%;
}
.spinner:before {
width: 100%;
height: 100%;
background-image: linear-gradient(90deg, #212529 0%, white 100%);
animation: spin .5s infinite linear;
}
.spinner:after {
width: 90%;
height: 90%;
background-color: white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/*Simulate page content*/
.main-content {
width: 100%;
height: 100vh;
background: url("https://source.unsplash.com/random/4000x4000") center no-repeat;
background-size: cover;
}<body onl oad="verifySession(), start_load()">
<div >
<div >
</div>
</div>CodePudding user response：
const start_load = function () {
document.querySelector('.spinner-wrapper').style.display = "block"
}
const end_load= function () {
document.querySelector('.spinner-wrapper').style.display = "none"
}
You can change .spinner-wrapper by any class you want. Those function will set fisrt html tag have .spinner-wrapper class to display : block or display : none Hope this help for you
CodePudding user response：
Your question is not very clear on when you want to start and stop the loader but from my understanding you have an api and you want the loader to show when someone calls your api so in that case you want to work with DOM event listeners you can read more on that here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener and here: https://www.w3schools.com/js/js_htmldom_eventlistener.asp
I've created a little codesandbox for you with two buttons to start and stop the loader as an example of how to use event listeners which you can find here: https://codesandbox.io/s/happy-rain-e9w3mz