Waiting Animation for Deleting Process

Written by @kerixa 23 May 2020

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!

Code Snippet:

                                                
                                                <!-- this script is provided by https://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='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Muzamiru, TheDewalt, sahjahan, fk khan, Proper
advertisement 2