<button type="button" class="btn-primary btn-loading">Button</button>
button {
  background-color: #0c7cd5;
  border: 1px solid transparent;
  border-color: #0b76cc;
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  color: #fff;
  transition: all 0.2s ease-in-out;
  position: relative;
}

$white:  #fff;
$loader-height: 0.15em;
$loader-width: 50%;
$green: #9CCC65;
$blue: #00BCD4;
$orange: #FFCA28;
$red: #EF5350;
$btn-primary-color: $white;
$btn-primary-bg: $blue;
$btn-secondary-color: #292b2c;
$btn-secondary-bg: $white;
$btn-success-color: $white;
$btn-success-bg: $green;
$btn-info-color: $white;
$btn-info-bg: $blue;
$btn-warning-color: $white;
$btn-warning-bg: $orange;
$btn-danger-color: $white;
$btn-danger-bg: $red;
$link-color: #2196F3;

.btn-loading {
    position: relative;
    overflow: hidden;

    &::before, &::after {
      position: absolute;
      bottom: 0;
      content: '';
      display: inline-block;
      height: $loader-height;
    }

    &::before {
      left: 0;
      right: 0;
      background-color: rgba(255, 255, 255, 0.1);
    }

    &::after {
        left: ($loader-width * -1);
        width: $loader-width;
        animation: loading-bar 1s infinite linear;
    }

    &.btn-primary {
        &::before {
            background-color: darken($btn-primary-bg, 15%);
        }
        &::after {
            background-color: darken($btn-primary-color, 20%);
        }
    }

    &.btn-secondary {
        &::before {
            background-color: darken($btn-secondary-bg, 15%);
        }
        &::after {
            background-color: darken($btn-secondary-color, 20%);
        }
    }

    &.btn-success {
        &::before {
            background-color: darken($btn-success-bg, 15%);
        }
        &::after {
            background-color: darken($btn-success-color, 20%);
        }
    }

    &.btn-info {
        &::before {
            background-color: darken($btn-info-bg, 15%);
        }
        &::after {
            background-color: darken($btn-info-color, 20%);
        }
    }

    &.btn-warning {
        &::before {
            background-color: darken($btn-warning-bg, 15%);
        }
        &::after {
            background-color: darken($btn-warning-color, 20%);
        }
    }

    &.btn-danger {
        &::before {
            background-color: darken($btn-danger-bg, 15%);
        }
        &::after {
            background-color: darken($btn-danger-color, 20%);
        }
    }

    &.btn-link {
        &::before {
            background-color: darken($white, 15%);
        }
        &::after {
            background-color: darken($link-color, 20%);
        }
    }
}

@keyframes loading-bar {
    0% {
        width: 0;
        left: 0%;
    }
    23% {
        width: 30%;
        left: 0%;
    }
    61.9% {
        width: 30%;
        left: 70%;
    }
    100% {
        width: 0;
        left: 100%;
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.