"loading" na tlačítku

by Petr Haluza

HTML

<div class="container">
  <div class="login-button">Login</div>
</div>

CSS

.container {  margin: 2em}
.login-button { font-size: 1.5em;  padding: 10px 20px; width: 200px;  position: relative; background:aliceblue}

.login-button:after {
  content: ""; position: absolute; top: 50%; margin-top: -12px; right: 20px;   height: 18px; width: 18px;
  border: solid 2px transparent;  border-top-color: #157dfb;  border-right-color: #157dfb;
  transform: rotate(45deg); transition: all 400ms;
}
.login-button.loading:after {
  border-radius: 16px;  border: solid 2px rgba(152, 162, 172, 0.4);  border-top-color: #157dfb;  border-right-color: #157dfb;

  animation: chase-spinner 600ms linear infinite 350ms;
}
@keyframes chase-spinner {
  0% { transform: rotate(45deg) }
  100% { transform: rotate(405deg) }
}

JavaScript

$(".login-button").click(function(){
  $(this).toggleClass('loading');
});