SPINNER inside of button is spinning with nothing inside of the form input fields

let me help you out. There's actually a pretty simple solution with jQuery.

First of all, we can remove the required attribute on both input fields. And while we're at it, let's also remove all current onClick Events.

We then add an id to our submit button, let's simply call it "submit". We'll add a new onClick-Event, a JS function to our submit button. So whenever the button is clicked, the function will be called. The name of the function is "validateEntry".

What's the purpose of the function? In the function we check if the password field is empty and if it's not, the spinner will be added. We'll check for the length of the password first, if it's null (0) than the spinner won't appear and you can decide what will happen instead (e.g. alert for missing password, ...). So the spinner will only appear if there's a password.

That's also why there's no need for the required attribute anymore.

Also, I'll recommend to you to set the min-/max-length of the password with JS. You'll be able to add a few extra functions there (e.g. disabling space or cutting copy paste).

So here's the code, hope I could help you.

<h1>Login</h1>
<input type="text" id="usr" name="usr" class="input input--text input-type__input   input--w-6" maxlength="35" placeholder="e.g. name@example.com" autocomplete="email">
<br>
<input type="password" id="password" name="password" class="input input--text input-type__input   input--w-6" maxlength="35"placeholder="Password" autocomplete="current-password">
<div class="orderweb__3a7c2968">
    <div class="orderweb__f659f0f0"></div>
</div>
</div>
<br>
<div class="orderweb__d28fa935">
    </span>
</div>
</div> <span class="ccl-67e0c7f3fe50cf69 ccl-a97a150ddadaa172">
<button type="submit" id="submit" tabindex="0" class="button ccl-d0484b0360a2b432 ccl-233931c277401e86 ccl-ed9aadeaa18a9f19 ccl-a97a150ddadaa172 btn u-mb-xl btn--loader js-loader js-submit-btn" name="action[save_continue]" onclick="validateEntry()">
<span class="ccl-cce251427bbe4ec4">
<span class="btn__inner">Continue</span> </button>

.button {
    position: relative;
    padding: 8px 16px;
    background: #009579;
    border: none;
    outline: none;
    border-radius: 2px;
    cursor: pointer;
}

.button:active {
    background: #007a63;
}

.button__text {
    font: bold 20px "Quicksand", san-serif;
    color: #ffffff;
    transition: all 0.2s;
}

.button--loading .button__text {
    visibility: hidden;
    opacity: 0;
}

.button--loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 4px solid transparent;
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: button-loading-spinner 1s ease infinite;
}

@keyframes button-loading-spinner {
    from {
        transform: rotate(0turn);
    }
    to {
        transform: rotate(1turn);
    }
}

//when clicking on submit button
function validateEntry(){
    //check if password field is empty
    var password
    password = document.getElementById('password').value.length;
    //if empty
    if(password == 0){
      //add what should happen if no password was entered
      alert("Please enter a password");
    }
    else{
      //apply spinner
      $('.btn__inner').css('display', 'none');
      var toggle
      toggle = document.getElementById('submit');
      toggle.classList.toggle('button--loading');
    }
  }