Html Code: Waiting Animation for Deleting Process

It might take time to something be deleted. To ease the waiting process for the users, get aid from interesting animations. Those that are light and made only by CSS, like this example!
<!-- this script got from 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='http://www.htmlbestcodes.com/' style='font-size: 8pt; text-decoration: none'>HTML Codes</a>
If you don't know how to use this code or need more information Click here!
Html Best Codes

Html Code: Waiting Animation for Deleting Process

Links
