Library

Labels

Languages

Button with loader

Arun - 19/07/2021 6:08 PM

Files 2

html
html

<button class="btn_btn home_submit">
<span class="loader_circle"><i></i><i></i><i></i></span>
<span class="loader_btn_text">SEND MESSAGE</span>
</button>
css
css
.loader_circle{
    display: inline-block;
    display: none;
    position: relative;
    width:16px;
    height:16px; vertical-align: middle; margin-right: 10px; 
}

.loader_circle.active{display:inline-block;}

.loader_btn_text{vertical-align: middle; display: inline-block;}

.loader_circle i{
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  margin: 2px 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  animation: loader_circle 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.loader_circle i:nth-child(1) {
  animation-delay: -0.45s;
}
.loader_circle i:nth-child(2) {
  animation-delay: -0.3s;
}
.loader_circle i:nth-child(3) {
  animation-delay: -0.15s;
}


@keyframes loader_circle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}