<!-- this script is provided by www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:300&display=swap');
body{
  background-color: rgba(255, 107, 129,.2);  
}

.cont{
  position:absolute;
  left:50%;
  top:50%;
  transform:Translate(-50%, -50%);
}

button{
  background-color:#ff4757;
  color:#6b0f0f;
  border-bottom:6px solid #6b0f0f;
  border-top:5px solid #576574;
  width:180px;
  font-size:28px;
  padding:15px 0px 15px 35px;
  border-radius:0px 0px 15px 15px;
  box-shadow:0px 0px 15px 1px rgba(214, 48, 49,.6);
  position:relative;
  font-family: 'Montserrat', sans-serif;

}

button:after{
  content:"";
  width:100%;
  height:1px;
  background-color:#c8d6e5;
  top:-3px;
  left:0;
  position:absolute;
}

.loader{
  position:absolute;
  top:30px;
  left:34px;
}

button .loader div{
  width:5px;
  height:5px;
  border-radius:50%;
  background-color:#6b0f0f;
  position:absolute;
  transform-origin: -8px;
  animation: light 3s linear infinite;
}

button .loader div:nth-child(1){
  transform:rotate(0deg);
  animation-delay:0s;
}

button .loader div:nth-child(2){
  transform:rotate(60deg);
  animation-delay:.5s;
}

button .loader div:nth-child(3){
  transform:rotate(120deg);
  animation-delay:1s;
}

button .loader div:nth-child(4){
  transform:rotate(180deg);
  animation-delay:1.5s;
}



button .loader div:nth-child(5){
  transform:rotate(240deg);
  animation-delay:2s;
}

button .loader div:nth-child(6){
  transform:rotate(300deg);
  animation-delay:2.5s;
}

@keyframes light{
  0%{background-color:#6b0f0f;}
  40%{background-color:#6b0f0f;}
  50%{background-color:white;}
  60%{background-color:#6b0f0f;}
  100%{background-color:#6b0f0f;}
}

.paper{
  width:150px;
  height:160px;
  box-shadow:0px 0px 10px 1px rgba(55,55,55,.3);
  left:0;
  right:0;
  margin: auto;
  animation: paper 4s ease infinite;
  position:absolute;
  transform-origin:top;
  transform:translateY(0px) rotate(180deg);
  background-color:#fff;
}

.g-cont{
  margin:0 auto;
  width:150px;
  text-align:center;
  position:absolute;
  top:73px;
  left:10px;
  right:0;
  margin: auto;
  z-index:10;
}

.garbage{
  height:160px;
  width:6px;
  box-shadow:0px 0px 10px 1px rgba(55,55,55,.3);
  display:inline-block;
  vertical-align:top;
  margin-right:9px;
  animation: garbage 4s ease infinite;
  background-color:#fff;
}

@keyframes garbage{
  0%{height:0px;transform:translateY(0px);opacity:0;}
  20%{height:0px;transform:translateY(0px);opacity:1;}
  70%{height:160px;transform:translateY(0px);opacity:1;}
  90.1%{height:160px;transform:translateY(100px);opacity:0;}
  100%{height:0px;opacity:0;}
}

@keyframes paper{
  0%{height:160px;opacity:0;transform:translateY(-100px) rotate(180deg);}
  20%{height:160px;opacity:1;transform:translateY(0px) rotate(180deg);}
  70%{height:0px;opacity:1;transform:translateY(0px) rotate(180deg);}
  70.1%{height:0px;opacity:0;transform:translateY(0px) rotate(180deg);}
  100%{height:160px;opacity:0;transform:translateY(-100px) rotate(180deg);}
}
</style>
<div class="cont">
<div class="paper"></div>
<button><div class='loader'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>Deleting</button>
<div class="g-cont">
<div class="garbage"></div>
<div class="garbage"></div>
<div class="garbage"></div>
<div class="garbage"></div>
<div class="garbage"></div>
<div class="garbage"></div>
<div class="garbage"></div>
<div class="garbage"></div>
</div>
</div><a target='_blank' href='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>