A Pen by Kye Hohenberger.

button-with-loader-arrow.markdown

button with loader arrow

When the user clicks on button the arrow turns into a loading spinner.

A Pen by Kye Hohenberger on CodePen.

License.

index.html

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

script.js

var button = document.querySelector('.login-button'),
    originalClass = button.className;

button.addEventListener('click', function() {
  var currentClass = button.className;
  if (currentClass === originalClass) {
    button.className += ' loading';
  } else {
    button.className = originalClass;
  }
});

style.less

@color: #157dfb;

.container {
  margin: 0 auto;
  width: 320px;
  height: 200px;
  margin: 20px 0;
}

.login-button {
  border-top: solid 1px rgba(182, 182, 182, 0.5);
  border-bottom: solid 1px rgba(182, 182, 182, 0.5);
  text-shadow: none;
  color: #6f6f74;
  background: #fff;
  border-radius: 0;
  display: block;
  cursor: pointer;
  font-size: 1.3em;
  padding: 16px 0 16px 3%;
  width: 100%;
  position: relative;
  
  font-size: 2em;
  font-weight: 100;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  
  &:after {
    content: "";
    z-index: 2000;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: 20px;
    height: 16px;
    width: 16px;
    border: solid 2px transparent;
    border-top-color: @color;
    border-right-color: @color;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    
    -moz-transition: all 400ms;
    -webkit-transition: all 400ms;
    transition: all 400ms;
  }
  &.loading {
    &:after {
      border-radius: 16px;
      border: solid 2px rgba(182, 182, 182, 0.2);
      border-top-color: @color;
      border-right-color: @color;
      -webkit-animation: chase-spinner 600ms linear infinite;
      animation: chase-spinner 600ms linear infinite;
      
      @-webkit-keyframes chase-spinner {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes chase-spinner {
  0% { transform: rotate(0deg); transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}
    }
  }
 }