Trying to display animation on click....not working (js, html, css)

Question

I have a loading element that I want to display on the click of a certain button. I have tried various methods including updating the visibility and display, as well as adding a "show" classList to the div onclick (current code). Nothing has worked so far and I am desperate. I would really appreciate any help. Thanks:)

 document.getElementById('text-generate-button').onclick = () => { parent.postMessage({ pluginMessage: { type: 'placeholder-frame' } }, '*') const loader = document.getElementById('loader'); loader.classList.add("show") }

 .loader { opacity: 0; background: #ffffff; /* background: radial-gradient(#222, #000); */ bottom: 0; left: 0; right: 0; top: 0; /* z-index: 99999; */ -webkit-transform: scale(0.4); -moz-transform: scale(0.4); -ms-transform: scale(0.4); transform: scale(0.4); }.loader.show { background: #ffffff; /* background: radial-gradient(#222, #000); */ bottom: 0; left: 0; right: 0; top: 0; /* z-index: 99999; */ -webkit-transform: scale(0.4); -moz-transform: scale(0.4); -ms-transform: scale(0.4); transform: scale(0.4); }.loader-inner { bottom: 0; height: auto; left: 0; margin: auto; position: relative; right: 0; top: 0; width: 100px; padding: 8px; }.loader-line-wrap { animation: spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite; box-sizing: border-box; height: 50px; left: 0; overflow: hidden; position: absolute; top: 0; transform-origin: 50% 100%; width: 100px; }.loader-line { border: 4px solid transparent; border-radius: 100%; box-sizing: border-box; height: 100px; left: 0; margin: 0 auto; position: absolute; right: 0; top: 0; width: 100px; }.loader-line-wrap:nth-child(1) { animation-delay: -50ms; }.loader-line-wrap:nth-child(2) { animation-delay: -100ms; }.loader-line-wrap:nth-child(3) { animation-delay: -150ms; }.loader-line-wrap:nth-child(4) { animation-delay: -200ms; }.loader-line-wrap:nth-child(5) { animation-delay: -250ms; }.loader-line-wrap:nth-child(1).loader-line { border-color: #EB6A6F; height: 90px; width: 90px; top: 7px; }.loader-line-wrap:nth-child(2).loader-line { border-color: #F6BA48; height: 76px; width: 76px; top: 14px; }.loader-line-wrap:nth-child(3).loader-line { border-color: #B5D643; height: 62px; width: 62px; top: 21px; }.loader-line-wrap:nth-child(4).loader-line { border-color: #50CFD4; height: 48px; width: 48px; top: 28px; }.loader-line-wrap:nth-child(5).loader-line { border-color: #9665D4; height: 34px; width: 34px; top: 35px; } @keyframes spin { 0%, 15% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

 <div class="footer"> <div class="loader"> <div class="loader-inner"> <div class="loader-line-wrap"> <div class="loader-line"></div> </div> <div class="loader-line-wrap"> <div class="loader-line"></div> </div> <div class="loader-line-wrap"> <div class="loader-line"></div> </div> <div class="loader-line-wrap"> <div class="loader-line"></div> </div> <div class="loader-line-wrap"> <div class="loader-line"></div> </div> </div> </div>

Answer 1

I think the problem is that the "show" class you are adding is set to "display: none". Maybe it can help.

Answer 2

I didn't dig deep whether there is a better way but one thing you can do is in your HTML set

<div class="loader" id="loader>

and in your JS

 loader.classList.toggle("loader")

here is running version: https://jsbin.com/boromarugo/edit?html,css,js,output

there should be cleaner way but you get the idea