Saw a cool google showcase Dribbble post, decided to recreate the download folder icon in HTML and CSS
A Pen by Tey Taghiyev on CodePen.
Saw a cool google showcase Dribbble post, decided to recreate the download folder icon in HTML and CSS
A Pen by Tey Taghiyev on CodePen.
<!-- | |
I like the folder animation in this: | |
https://dribbble.com/shots/1752769-Google-Design?list=shots&sort=popular&timeframe=week&offset=57 | |
so here ya go --> | |
<div class="page"> | |
<div class="folder"> | |
<span class="folder-tab"></span> | |
<div class="folder-icn"> | |
<div class="downloading"> | |
<span class="custom-arrow"></span> | |
</div> | |
<div class="bar"></div> | |
</div> | |
</div> | |
</div> |
@import "compass/css3"; | |
* { box-sizing: border-box; } | |
html, body { | |
margin: 0; padding: 0; | |
position: relative; | |
width: 100%; | |
height: 100%; | |
background-color: #2196f3; | |
} | |
.page { | |
height: 100%; | |
@include display-flex; | |
@include align-items(center); | |
-moz-box-align: center; | |
-webkit-box-pack: center; | |
-webkit-justify-content: center; | |
justify-content: center; | |
-moz-box-pack: center; | |
-ms-flex-pack: center; | |
} | |
.folder { | |
background-color: #d3eafd; | |
position: relative; | |
width: 92px; | |
height: 64px; | |
display: block; | |
border-top-right-radius: 8px; | |
border-bottom-right-radius: 8px; | |
border-bottom-left-radius: 8px; | |
} | |
.folder-tab { | |
position: absolute; | |
height: 10px; | |
left: 0; | |
bottom: 100%; | |
display: block; | |
width: 40%; | |
border-top-left-radius: 8px; | |
background-color: inherit; | |
&:after { | |
content: ''; | |
position: absolute; | |
display: block; | |
top: 0; | |
left: calc(100% - 10px); | |
border-bottom: 10px solid #d3eafd; | |
border-left: 10px solid transparent; | |
border-right: 10px solid transparent; | |
} | |
} | |
.folder-icn { | |
padding-top: 12px; | |
width: 100%; | |
height: 100%; | |
display: block; | |
} | |
.downloading { | |
width: 30px; | |
height: 32px; | |
margin: 0 auto; | |
position: relative; | |
overflow: hidden; | |
} | |
.custom-arrow { | |
width: 14px; | |
height: 14px; | |
position: absolute; | |
top: 0; | |
left: 50%; | |
margin-left: -7px; | |
background-color: #fff; | |
-webkit-animation-name: downloading; | |
-webkit-animation-duration: 1.5s; | |
-webkit-animation-iteration-count: infinite; | |
animation-name: downloading; | |
animation-duration: 1.5s; | |
animation-iteration-count: infinite; | |
&:after { | |
content: ''; position: absolute; display: block; | |
top: 100%; | |
left: -9px; | |
border-top: 15px solid #fff; | |
border-left: 16px solid transparent; | |
border-right: 16px solid transparent; | |
} | |
} | |
.bar { | |
width: 30px; | |
height: 4px; | |
background-color: #fff; | |
margin: 0 auto; | |
} | |
@-webkit-keyframes downloading { | |
0% { | |
top: 0; | |
opacity: 1; | |
} | |
50% { | |
top: 110%; | |
opacity: 0; | |
} | |
52% { | |
top: -110%; | |
opacity: 0; | |
} | |
100% { | |
top: 0; | |
opacity: 1; | |
} | |
} | |
@keyframes downloading { | |
0% { | |
top: 0; | |
opacity: 1; | |
} | |
50% { | |
top: 110%; | |
opacity: 0; | |
} | |
52% { | |
top: -110%; | |
opacity: 0; | |
} | |
100% { | |
top: 0; | |
opacity: 1; | |
} | |
} |