CSS to add a rotating loader inside a button with minimal css

Loading Button.css

  input[type=submit].loading{
    color: transparent;
    position: relative;
}

input[type=submit].loading::before{
    width: 20px;
    height: 20px;
    border: 2px solid #e1e1e1;
    border-top-color: #898989;
    animation: rotate 0.6s linear infinite;
    content: '';
    position: absolute;
    border-radius: 50%;
    right: calc(50% - 10px);
}

@keyframes rotate {
  from{
    transform: rotate(0);
  }
  to{
    transform: rotate(360deg);
  }
}

Submit.js

document.querySelector('input[type=submit]').addEventListener('click', () => {  
  document.querySelector('input[type=submit]').classList.add('loading')
})