Hello Coders! Welcome to CSS Animation Blog. In this, we're going to see how to create a Download Button which while downloading shows a prgress bar of your download and in the end shows a icon displaying a successful download of your file. No SVG is used while creating this animation. You can use this in many ways like suppose you want user to download a source code that you provide, or any other file in your blog. It can also be used in various conversion websites as well.
Here's a preview
That being said, let us get started.
Step - 1: Like always, create 2 files - index.html and style.css.
Step - 2: Copy the below HTML code and paste it into your code editor.
HTML
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Feedback Rating Component</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="form">
<fieldset class="stars">
<input type="radio" name="stars" id="star1"
ontouchstart="ontouchstart"/>
<label class="fa fa-star" for="star1"></label>
<input type="radio" name="stars" id="star2"
ontouchstart="ontouchstart"/>
<label class="fa fa-star" for="star2"></label>
<input type="radio" name="stars" id="star3"
ontouchstart="ontouchstart"/>
<label class="fa fa-star" for="star3"></label>
<input type="radio" name="stars" id="star4"
ontouchstart="ontouchstart"/>
<label class="fa fa-star" for="star4"></label>
<input type="radio" name="stars" id="star5"
ontouchstart="ontouchstart"/>
<label class="fa fa-star" for="star5"></label>
<input type="radio" name="stars" id="star-reset"/>
<label class="reset" for="star-reset">reset</label>
<figure class="face"><i></i><i></i>
<u>
<div class="cover"></div>
</u>
</figure>
</fieldset>
</form>
</body>
</html>
Step - 3: Below is the CSS code for styling.
CSS
/* Code By Webdevtrick ( https://webdevtrick.com ) */
@import url(https://fonts.googleapis.com/css?family=Nunito:400,700,300);
* {
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
font-family: 'Nunito', sans-serif;
background: #2C363F;
}
.container {
position: absolute;
left: 0;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 660px;
margin: auto;
}
.container a {
color: #b74096;
}
.download_button {
border: 2px solid #b74096;
width: 200px;
text-align: center;
height: 48px;
padding: 2px 4px;
border-radius: 100px;
color: white;
margin: 0 auto;
-webkit-transition: all .3s;
transition: all .3s;
position: relative;
z-index: 3;
line-height: 42px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
}
.download_button:hover {
box-shadow: 0px 0px 0px 6px rgba(0, 0, 0, 0.2);
background: #b74096;
}
.download_button:hover span i {
margin-right: 10px;
}
.download_button:active {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
}
.download_button__bar {
width: 0%;
position: absolute;
height: 8px;
top: 4px;
border-radius: 100px;
background: -webkit-linear-gradient(left, #b74096 0%, #ec73ca 100%);
}
.container input {
display: none;
}
.container input:checked + label .download_button span span {
opacity: 0;
left: 40px;
}
.container input:checked + label .download_button span i {
opacity: 0;
left: -40px;
}
input:checked + label .download_button {
-webkit-animation: base 0.96s 0.12s cubic-bezier(0.755, -0.245, 0.175, 1) forwards, pulse 0.5s forwards, final 0.3s 3.6s forwards;
animation: base 0.96s 0.12s cubic-bezier(0.755, -0.245, 0.175, 1) forwards, pulse 0.5s forwards, final 0.3s 3.6s forwards;
}
input:checked + label .download_button .downloading {
-webkit-animation: pop .2s 1s forwards,popout .2s 3.4s forwards;
animation: pop .2s 1s forwards,popout .2s 3.4s forwards;
}
input:checked + label .download_button .d_icon {
-webkit-animation: d_icon .6s 1s forwards,wobble .4s 3.58s forwards,iconout .14s 4.45s forwards;
animation: d_icon .6s 1s forwards,wobble .4s 3.58s forwards,iconout .14s 4.45s forwards;
}
input:checked + label .download_button .complete {
-webkit-animation: d_icon .14s 4.55s forwards;
animation: d_icon .14s 4.55s forwards;
}
input:checked + label .download_button .point:nth-of-type(1) {
-webkit-animation: dot 0.14s 4.0038461538s forwards;
animation: dot 0.14s 4.0038461538s forwards;
}
input:checked + label .download_button .point:nth-of-type(2) {
-webkit-animation: dot 0.14s 4.0076923077s forwards;
animation: dot 0.14s 4.0076923077s forwards;
}
input:checked + label .download_button .point:nth-of-type(3) {
-webkit-animation: dot 0.14s 4.0115384615s forwards;
animation: dot 0.14s 4.0115384615s forwards;
}
input:checked + label .download_button .point:nth-of-type(4) {
-webkit-animation: dot 0.14s 4.0153846154s forwards;
animation: dot 0.14s 4.0153846154s forwards;
}
input:checked + label .download_button .point:nth-of-type(5) {
-webkit-animation: dot 0.14s 4.0192307692s forwards;
animation: dot 0.14s 4.0192307692s forwards;
}
input:checked + label .download_button .point:nth-of-type(6) {
-webkit-animation: dot 0.14s 4.0230769231s forwards;
animation: dot 0.14s 4.0230769231s forwards;
}
input:checked + label .download_button .point:nth-of-type(7) {
-webkit-animation: dot 0.14s 4.0269230769s forwards;
animation: dot 0.14s 4.0269230769s forwards;
}
input:checked + label .download_button .point:nth-of-type(8) {
-webkit-animation: dot 0.14s 4.0307692308s forwards;
animation: dot 0.14s 4.0307692308s forwards;
}
input:checked + label .download_button .point:nth-of-type(9) {
-webkit-animation: dot 0.14s 4.0346153846s forwards;
animation: dot 0.14s 4.0346153846s forwards;
}
input:checked + label .download_button .point:nth-of-type(10) {
-webkit-animation: dot 0.14s 4.0384615385s forwards;
animation: dot 0.14s 4.0384615385s forwards;
}
input:checked + label .download_button .point:nth-of-type(11) {
-webkit-animation: dot 0.14s 4.0423076923s forwards;
animation: dot 0.14s 4.0423076923s forwards;
}
input:checked + label .download_button .point:nth-of-type(12) {
-webkit-animation: dot 0.14s 4.0461538462s forwards;
animation: dot 0.14s 4.0461538462s forwards;
}
input:checked + label .download_button .point:nth-of-type(13) {
-webkit-animation: dot 0.14s 4.05s forwards;
animation: dot 0.14s 4.05s forwards;
}
input:checked + label .download_button .point:nth-of-type(14) {
-webkit-animation: dot 0.14s 4.0538461538s forwards;
animation: dot 0.14s 4.0538461538s forwards;
}
input:checked + label .download_button .point:nth-of-type(15) {
-webkit-animation: dot 0.14s 4.0576923077s forwards;
animation: dot 0.14s 4.0576923077s forwards;
}
input:checked + label .download_button .point:nth-of-type(16) {
-webkit-animation: dot 0.14s 4.0615384615s forwards;
animation: dot 0.14s 4.0615384615s forwards;
}
input:checked + label .download_button .point:nth-of-type(17) {
-webkit-animation: dot 0.14s 4.0653846154s forwards;
animation: dot 0.14s 4.0653846154s forwards;
}
input:checked + label .download_button .point:nth-of-type(18) {
-webkit-animation: dot 0.14s 4.0692307692s forwards;
animation: dot 0.14s 4.0692307692s forwards;
}
input:checked + label .download_button .point:nth-of-type(19) {
-webkit-animation: dot 0.14s 4.0730769231s forwards;
animation: dot 0.14s 4.0730769231s forwards;
}
input:checked + label .download_button .point:nth-of-type(20) {
-webkit-animation: dot 0.14s 4.0769230769s forwards;
animation: dot 0.14s 4.0769230769s forwards;
}
input:checked + label .download_button .point:nth-of-type(21) {
-webkit-animation: dot 0.14s 4.0807692308s forwards;
animation: dot 0.14s 4.0807692308s forwards;
}
input:checked + label .download_button .point:nth-of-type(22) {
-webkit-animation: dot 0.14s 4.0846153846s forwards;
animation: dot 0.14s 4.0846153846s forwards;
}
input:checked + label .download_button .point:nth-of-type(23) {
-webkit-animation: dot 0.14s 4.0884615385s forwards;
animation: dot 0.14s 4.0884615385s forwards;
}
input:checked + label .download_button .point:nth-of-type(24) {
-webkit-animation: dot 0.14s 4.0923076923s forwards;
animation: dot 0.14s 4.0923076923s forwards;
}
input:checked + label .download_button .point:nth-of-type(25) {
-webkit-animation: dot 0.14s 4.0961538462s forwards;
animation: dot 0.14s 4.0961538462s forwards;
}
input:checked + label .download_button .point:nth-of-type(26) {
-webkit-animation: dot 0.14s 4.1s forwards;
animation: dot 0.14s 4.1s forwards;
}
input:checked + label .download_button .point:nth-of-type(27) {
-webkit-animation: dot 0.14s 4.1038461538s forwards;
animation: dot 0.14s 4.1038461538s forwards;
}
input:checked + label .download_button .point:nth-of-type(28) {
-webkit-animation: dot 0.14s 4.1076923077s forwards;
animation: dot 0.14s 4.1076923077s forwards;
}
input:checked + label .download_button .point:nth-of-type(29) {
-webkit-animation: dot 0.14s 4.1115384615s forwards;
animation: dot 0.14s 4.1115384615s forwards;
}
input:checked + label .download_button .point:nth-of-type(30) {
-webkit-animation: dot 0.14s 4.1153846154s forwards;
animation: dot 0.14s 4.1153846154s forwards;
}
input:checked + label .download_button .point:nth-of-type(31) {
-webkit-animation: dot 0.14s 4.1192307692s forwards;
animation: dot 0.14s 4.1192307692s forwards;
}
input:checked + label .download_button .point:nth-of-type(32) {
-webkit-animation: dot 0.14s 4.1230769231s forwards;
animation: dot 0.14s 4.1230769231s forwards;
}
input:checked + label .download_button .point:nth-of-type(33) {
-webkit-animation: dot 0.14s 4.1269230769s forwards;
animation: dot 0.14s 4.1269230769s forwards;
}
input:checked + label .download_button .point:nth-of-type(34) {
-webkit-animation: dot 0.14s 4.1307692308s forwards;
animation: dot 0.14s 4.1307692308s forwards;
}
input:checked + label .download_button .point:nth-of-type(35) {
-webkit-animation: dot 0.14s 4.1346153846s forwards;
animation: dot 0.14s 4.1346153846s forwards;
}
input:checked + label .download_button .point:nth-of-type(36) {
-webkit-animation: dot 0.14s 4.1384615385s forwards;
animation: dot 0.14s 4.1384615385s forwards;
}
input:checked + label .download_button:hover {
box-shadow: none;
}
input:checked + label .download_button__bar {
-webkit-animation: bar 2.6s 1.14s cubic-bezier(0.19, 1, 0.22, 1) forwards, barout 0.3s 3.2s forwards;
animation: bar 2.6s 1.14s cubic-bezier(0.19, 1, 0.22, 1) forwards, barout 0.3s 3.2s forwards;
}
label {
cursor: pointer;
}
label .downloading {
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 28px;
opacity: 0;
font-size: 12px;
}
label .point {
opacity: 0;
width: 2px;
height: 6px;
-webkit-transform-origin: 60px 0px;
transform-origin: 60px 0px;
background: #b74096;
border-radius: 10px;
position: absolute;
left: -11px;
top: 50px;
}
label .point:nth-of-type(1) {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
label .point:nth-of-type(2) {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
label .point:nth-of-type(3) {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
label .point:nth-of-type(4) {
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
label .point:nth-of-type(5) {
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
label .point:nth-of-type(6) {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
label .point:nth-of-type(7) {
-webkit-transform: rotate(70deg);
transform: rotate(70deg);
}
label .point:nth-of-type(8) {
-webkit-transform: rotate(80deg);
transform: rotate(80deg);
}
label .point:nth-of-type(9) {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
label .point:nth-of-type(10) {
-webkit-transform: rotate(100deg);
transform: rotate(100deg);
}
label .point:nth-of-type(11) {
-webkit-transform: rotate(110deg);
transform: rotate(110deg);
}
label .point:nth-of-type(12) {
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
label .point:nth-of-type(13) {
-webkit-transform: rotate(130deg);
transform: rotate(130deg);
}
label .point:nth-of-type(14) {
-webkit-transform: rotate(140deg);
transform: rotate(140deg);
}
label .point:nth-of-type(15) {
-webkit-transform: rotate(150deg);
transform: rotate(150deg);
}
label .point:nth-of-type(16) {
-webkit-transform: rotate(160deg);
transform: rotate(160deg);
}
label .point:nth-of-type(17) {
-webkit-transform: rotate(170deg);
transform: rotate(170deg);
}
label .point:nth-of-type(18) {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
label .point:nth-of-type(19) {
-webkit-transform: rotate(190deg);
transform: rotate(190deg);
}
label .point:nth-of-type(20) {
-webkit-transform: rotate(200deg);
transform: rotate(200deg);
}
label .point:nth-of-type(21) {
-webkit-transform: rotate(210deg);
transform: rotate(210deg);
}
label .point:nth-of-type(22) {
-webkit-transform: rotate(220deg);
transform: rotate(220deg);
}
label .point:nth-of-type(23) {
-webkit-transform: rotate(230deg);
transform: rotate(230deg);
}
label .point:nth-of-type(24) {
-webkit-transform: rotate(240deg);
transform: rotate(240deg);
}
label .point:nth-of-type(25) {
-webkit-transform: rotate(250deg);
transform: rotate(250deg);
}
label .point:nth-of-type(26) {
-webkit-transform: rotate(260deg);
transform: rotate(260deg);
}
label .point:nth-of-type(27) {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
label .point:nth-of-type(28) {
-webkit-transform: rotate(280deg);
transform: rotate(280deg);
}
label .point:nth-of-type(29) {
-webkit-transform: rotate(290deg);
transform: rotate(290deg);
}
label .point:nth-of-type(30) {
-webkit-transform: rotate(300deg);
transform: rotate(300deg);
}
label .point:nth-of-type(31) {
-webkit-transform: rotate(310deg);
transform: rotate(310deg);
}
label .point:nth-of-type(32) {
-webkit-transform: rotate(320deg);
transform: rotate(320deg);
}
label .point:nth-of-type(33) {
-webkit-transform: rotate(330deg);
transform: rotate(330deg);
}
label .point:nth-of-type(34) {
-webkit-transform: rotate(340deg);
transform: rotate(340deg);
}
label .point:nth-of-type(35) {
-webkit-transform: rotate(350deg);
transform: rotate(350deg);
}
label .point:nth-of-type(36) {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
label .complete {
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 50%;
z-index: 2;
-webkit-transform: translateY(-50%) scale(0);
transform: translateY(-50%) scale(0);
font-size: 32px;
}
label .d_icon {
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 50%;
z-index: 2;
-webkit-transform: translateY(-50%) scale(0);
transform: translateY(-50%) scale(0);
font-size: 32px;
}
label span {
opacity: 1;
-webkit-transition: all .18s;
transition: all .18s;
position: relative;
top: -3px;
}
label span i {
font-size: 22px;
margin-right: 6px;
position: relative;
left: 0;
-webkit-transition: all .2s;
transition: all .2s;
top: 3px;
}
label span span {
left: 0;
top: 0px;
-webkit-transition: all .2s;
transition: all .2s;
}
label span .large {
position: absolute;
opacity: 0;
-webkit-transition: all .3s .1s;
transition: all .3s .1s;
left: -59px;
top: -21px;
font-size: 60px;
}
@-webkit-keyframes base {
0% {
border: none;
}
50% {
width: 20px;
height: 40px;
background: #b74096;
height: 16px;
border: none;
}
75% {
background: rgba(0, 0, 0, 0.34);
border: none;
}
76% {
width: 405px;
height: 16px;
background: rgba(0, 0, 0, 0.34);
border: none;
}
88% {
width: 384px;
height: 16px;
background: rgba(0, 0, 0, 0.34);
border: none;
}
100% {
width: 400px;
height: 16px;
background: rgba(0, 0, 0, 0.34);
border: none;
}
}
@keyframes base {
0% {
border: none;
}
50% {
width: 20px;
height: 40px;
background: #b74096;
height: 16px;
border: none;
}
75% {
background: rgba(0, 0, 0, 0.34);
border: none;
}
76% {
width: 405px;
height: 16px;
background: rgba(0, 0, 0, 0.34);
border: none;
}
88% {
width: 384px;
height: 16px;
background: rgba(0, 0, 0, 0.34);
border: none;
}
100% {
width: 400px;
height: 16px;
background: rgba(0, 0, 0, 0.34);
border: none;
}
}
@-webkit-keyframes bar {
100% {
width: 98%;
}
}
@keyframes bar {
100% {
width: 98%;
}
}
@-webkit-keyframes pulse {
0% {
box-shadow: 0px 0px 0px 6px rgba(0, 0, 0, 0.08);
}
100% {
box-shadow: 0px 0px 0px 1920px rgba(0, 0, 0, 0);
}
}
@keyframes pulse {
0% {
box-shadow: 0px 0px 0px 6px rgba(0, 0, 0, 0.08);
}
100% {
box-shadow: 0px 0px 0px 1920px rgba(0, 0, 0, 0);
}
}
@-webkit-keyframes pop {
100% {
opacity: 1;
top: 23px;
}
}
@keyframes pop {
100% {
opacity: 1;
top: 23px;
}
}
@-webkit-keyframes popout {
0% {
opacity: 1;
top: 23px;
}
100% {
opacity: 0;
top: 28px;
}
}
@keyframes popout {
0% {
opacity: 1;
top: 23px;
}
100% {
opacity: 0;
top: 28px;
}
}
@-webkit-keyframes barout {
100% {
opacity: 0;
}
}
@keyframes barout {
100% {
opacity: 0;
}
}
@-webkit-keyframes final {
0% {
background: rgba(0, 0, 0, 0.34);
}
50% {
background: rgba(0, 0, 0, 0.34);
width: 100px;
height: 100px;
box-shadow: none;
}
100% {
width: 100px;
height: 100px;
background: none;
}
}
@keyframes final {
0% {
background: rgba(0, 0, 0, 0.34);
}
50% {
background: rgba(0, 0, 0, 0.34);
width: 100px;
height: 100px;
box-shadow: none;
}
100% {
width: 100px;
height: 100px;
background: none;
}
}
@-webkit-keyframes d_icon {
0% {
-webkit-transform: translateY(-50%) scale(0);
transform: translateY(-50%) scale(0);
}
25% {
-webkit-transform: translateY(-50%) scale(1.2);
transform: translateY(-50%) scale(1.2);
}
50% {
-webkit-transform: translateY(-50%) scale(0.9);
transform: translateY(-50%) scale(0.9);
}
75% {
-webkit-transform: translateY(-50%) scale(1.1);
transform: translateY(-50%) scale(1.1);
}
100% {
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
}
}
@keyframes d_icon {
0% {
-webkit-transform: translateY(-50%) scale(0);
transform: translateY(-50%) scale(0);
}
25% {
-webkit-transform: translateY(-50%) scale(1.2);
transform: translateY(-50%) scale(1.2);
}
50% {
-webkit-transform: translateY(-50%) scale(0.9);
transform: translateY(-50%) scale(0.9);
}
75% {
-webkit-transform: translateY(-50%) scale(1.1);
transform: translateY(-50%) scale(1.1);
}
100% {
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
}
}
@-webkit-keyframes iconout {
0% {
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
}
100% {
-webkit-transform: translateY(-50%) scale(0);
transform: translateY(-50%) scale(0);
}
}
@keyframes iconout {
0% {
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
}
100% {
-webkit-transform: translateY(-50%) scale(0);
transform: translateY(-50%) scale(0);
}
}
@-webkit-keyframes dot {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes dot {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes wobble {
0% {
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
}
25% {
-webkit-transform: translateY(-50%) scale(1.2);
transform: translateY(-50%) scale(1.2);
}
50% {
-webkit-transform: translateY(-50%) scale(0.9);
transform: translateY(-50%) scale(0.9);
}
75% {
-webkit-transform: translateY(-50%) scale(1.1);
transform: translateY(-50%) scale(1.1);
}
100% {
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
}
}
@keyframes wobble {
0% {
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
}
25% {
-webkit-transform: translateY(-50%) scale(1.2);
transform: translateY(-50%) scale(1.2);
}
50% {
-webkit-transform: translateY(-50%) scale(0.9);
transform: translateY(-50%) scale(0.9);
}
75% {
-webkit-transform: translateY(-50%) scale(1.1);
transform: translateY(-50%) scale(1.1);
}
100% {
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
}
}
And that's it. You're done.
Let me know in the comments if you have any doubt related to this.
Follow @creocodigo for more projects and web related content.
If you find this useful, below are some other posts that I am sure you'll love