loading animation not happening in container

Question

I have a working example of a page loading animation when the user hits submit on the form here. Im trying to change the animation to something different but the newer animation is not happening inside the container and is loading even before the user hits submit on that form. The non working example can be found here

Can someone help me understand why this animation is not happening inside the container and why its being run when the page loads?

var myForm = document.getElementById('needs-validation');
myForm.addEventListener('submit', showLoader);
function showLoader(e) {
  this.querySelector('.loader-container').style.display = 'block';
  // the line below is just for the demo, it stops the form from submitting
  // so that you can see it works. Don't use it
  e.preventDefault();
}

#needs-validation {
      /* .loader-container will be positionned relative to this */
      position: relative;
    }
    
    .loader-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .loader {
        display: block;
        position: relative;
        left: 50%;
        top: 50%;
        width: 150px;
        height: 150px;
        margin: -75px 0 0 -75px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #9370DB;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }
    .loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #BA55D3;
        -webkit-animation: spin 3s linear infinite;
        animation: spin 3s linear infinite;
    }
    .loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #FF00FF;
        -webkit-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite;
    }
    @-webkit-keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

<form id="needs-validation">
    <p>First name: <input type="text"></p>
    <p>Last name: <input type="text"></p>
    <p>Age: <input type="text"></p>
    <button type="submit">Next</button>
    <!-- insert your loader container here, inside the <form> element -->
    <div class="loader-container">
      <div class="loader"></div>
    </div>
</form>

score 1 · Accepted Answer · answered Dec 04 '17 at 00:16

1

There was something messy in your .loader-container

Actually only thing I have done, I haave taken this class from working solution and added into the new one and it works.

In your new solution, you are missing the display:none at first place.

Here is an updated solution for you.

https://jsfiddle.net/v9dhqvrc/

answered Dec 04 '17 at 00:16

Zorak

709
7
24

Interesting. Thanks for the help. – Max Powers Dec 04 '17 at 00:23

loading animation not happening in container

1 Answers1