<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>
@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);}
}
//https://dribbble.com/shots/2099057-Deleting
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.