Animated Button Loader In CSS

Preview:

Description:

An animated loading animation that displays an awesome stripe animation inside your button. Built with plain HTML and CSS.

How to use it:

1. Add loading text to your button.

<button class="button__loader">
  <span class="button__text">
    Loading...
  </span>
</button>

2. The CSS/CSS3 styles for the loading animation.

:root {
  /* variables */
  --first-color: hsl(231, 44%, 56%);
  --first-color-alt: hsl(231, 44%, 51%);
  --text-color: hsl(231, 12%, 98%);
}
.button__loader {
  border: none;
  outline: none;
  position: relative;
  padding: 1.25rem 2.5rem;
  background-color: var(--first-color);
  color: var(--text-color);
  font-size: 1rem;
  border-radius: .5rem;
  box-shadow: 0 18px 40px hsla(231, 56%, 56%, .3);
  overflow: hidden;
  cursor: wait;
}
.button__loader::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 100%;
  background: repeating-linear-gradient(60deg, 
              transparent, 
              transparent 0.75rem, 
              var(--first-color-alt) 0.75rem, 
              var(--first-color-alt) 1.5rem);
  animation: load 1s infinite linear;
}
.button__text {
  position: relative;
}
/* Loading button animation */
@keyframes load {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1.75rem);
  }
}