<div class="container">
  <div class="load-btn" onclick="this.classList.toggle('active')">
    <div class="text">
      Load Music
    </div>
    <div class="animation">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
  </div>
</div>
.container {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.load-btn {
  position:relative;
  width:170px;
  height:70px;
  border:2px solid rgba(238, 77, 81, 0.90);
  color:rgba(238, 77, 81, 0.90);
  text-align:center;
  line-height:70px;
  font-size:20px;
  text-transform:uppercase;
  font-family:sans-serif;
  font-weight:600;
  letter-spacing:1px;
  transition:all 300ms cubic-bezier(0.5, -0.22, 0.7, 0.06);
}
.load-btn:hover {
  background:rgba(238, 77, 81, 0.90);
  color:#eee;
}
.load-btn .animation {
  display:none;
}
.load-btn.active {
  width:150px;
  height:150px;
  border-radius:50%;
  background:rgba(238, 77, 81, 0.90);
  transform:rotate(180deg);
}
.load-btn.active > .text {
   display:none;
}
  
.load-btn.active > .animation {
  width:90px;
  height:50px;
  overflow:hidden;
  position:relative;
  top:30%;
  left:50%;
  margin-left:-45px;
  z-index:100;
  display:flex;
  transform-origin:top;
  justify-content:space-between;
}
.load-btn .animation .bar {
  width:13px;
  height:50px;
  background:rgba(240,240,240,0.88);
  animation:loading 1500ms ease-in-out infinite;
  border-radius:3px;
}
.load-btn .animation .bar:nth-child(1){
  animation-delay:800ms;
}
.load-btn .animation .bar:nth-child(2){
  animation-delay:250ms;
}
.load-btn .animation .bar:nth-child(3){
  animation-delay:450ms;
}
.load-btn .animation .bar:nth-child(4){
  animation-delay:320ms;
}
.load-btn .animation .bar:nth-child(5){
  animation-delay:550ms;
}
.load-btn .animation .bar:nth-child(6){
  animation-delay:200ms;
}


@keyframes loading {
  0% {
    height:0px;
  }
  60% {
    height:45px;
  }
  100% {
    height:0px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.