It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Please check your email for instructions to activate your account.
Written by 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!
<!-- 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>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!