// Usage
// Only tested with normal size button, will update if required
<my-loader [loading]="loading" defaultText="LOGIN"></my-loader>

// loader.ts
import { Component, Input } from 'angular2/core';

@Component({
  selector: 'my-loader',
  template: `
    <div class="myLoader" [hidden]="!loading">Loading ...</div>
    <span [hidden]="loading">{{defaultText}}</span>
  `
})

export class MyLoader {
  @Input() loading: boolean;
  @Input() defaultText: string;
}

// loader.scss
// Loader
.button .myLoader {
  top: -23px;
}

.myLoader:before,
.myLoader:after,
.myLoader {
  border-radius: 50%;
  width: 0.9em;
  height: 0.9em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.5s infinite ease-in-out;
  animation: load7 1.5s infinite ease-in-out;
}
.myLoader {
  font-size: 10px;
  margin: 0 auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.myLoader:before {
  left: -1.9em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.myLoader:after {
  left: 1.9em;
}

.myLoader:before,
.myLoader:after {
  content: '';
  position: absolute;
  top: 0;
}

@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em $background-color;
  }
  40% {
    box-shadow: 0 2.5em 0 0 $background-color;
  }
}

@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em $background-color;
  }
  40% {
    box-shadow: 0 2.5em 0 0 $background-color;
  }
}