Upload button animation using HTML CSS and JavaScript – Coding Torque
Hello Guys! Welcome to Coding Torque. In this blog, we are going to make an upload button animation using HTML, CSS, and JavaScript. You must create this if you are a beginner and learning HTML and CSS.
Before we start, here are some JavaScript Games you might like to create:
1.Ā Snake Game using JavaScript
2.Ā 2D Bouncing Ball Game using JavaScript
3.Ā Rock Paper Scissor Game using JavaScript
4.Ā Tic Tac Toe Game using JavaScript
5. Whack a Mole Game using JavaScript
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
HTML CodeĀ
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Upload button animation - @codingtorque</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<!-- Less CDN -->
<script src="https://cdn.jsdelivr.net/npm/less"></script>
</head>
<body>
<!-- further code in next block -->
<!-- JQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.1.js"
integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>Paste the below code in your <body> tag
<div class="button">
<a>
<span>Upload Now</span>
<svg class="load" version="1.1" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 40 40"
enable-background="new 0 0 40 40">
<path opacity="0.3" fill="#fff"
d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z" />
<path fill="#fff" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
C22.32,8.481,24.301,9.057,26.013,10.047z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20"
to="360 20 20" dur="0.5s" repeatCount="indefinite" />
</path>
</svg>
<svg class="check" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
</svg>
</a>
<div>
<span></span>
</div>
</div>CSS CodeĀ
Create a fileĀ style.css and paste the code below.
@primary: #3f82d7;
@success: #28e470;
@light: #d3d7e0;
body {
background: #eef0f5;
font-family: Arial;
font-size: 14px;
}
.button {
svg {
display: none;
position: absolute;
left: 50%;
top: 50%;
margin: -15px 0 0 -15px;
fill: #fff;
}
div {
span {
position: absolute;
background: @success;
height: 4px;
left: 0;
top: 0;
width: 0;
display: block;
border-radius: 2px;
}
height: 4px;
margin: -2px 0 0 0;
position: absolute;
top: 50%;
left: 71px;
right: 25px;
background: @light;
display: none;
border-radius: 2px;
}
a {
span {
cursor: pointer;
display: block;
}
position: relative;
display: block;
background: @primary;
z-index: 2;
line-height: 56px;
height: 56px;
border-radius: 28px;
width: 100%;
text-align: center;
color: #fff;
box-shadow: 0 2px 6px rgba(170, 185, 200, 0.4);
}
border-radius: 28px;
position: absolute;
left: 50%;
top: 50%;
display: block;
background: #fff;
width: 150px;
box-shadow: 0 2px 6px rgba(170, 185, 200, 0.4);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}Output Till Now
JavaScript CodeĀ
Create a fileĀ
script.jsĀ and paste the code below.$(document).ready(function () {
$(".button a span").click(function () {
var btn = $(this).parent().parent();
var loadSVG = btn.children("a").children(".load");
var loadBar = btn.children("div").children("span");
var checkSVG = btn.children("a").children(".check");
btn.children("a").children("span").fadeOut(200, function () {
btn.children("a").animate({
width: 56
}, 100, function () {
loadSVG.fadeIn(300);
btn.animate({
width: 320
}, 200, function () {
btn.children("div").fadeIn(200, function () {
loadBar.animate({
width: "100%"
}, 2000, function () {
loadSVG.fadeOut(200, function () {
checkSVG.fadeIn(200, function () {
setTimeout(function () {
btn.children("div").fadeOut(200, function () {
loadBar.width(0);
checkSVG.fadeOut(200, function () {
btn.children("a").animate({
width: 150
});
btn.animate({
width: 150
}, 300, function () {
btn.children("a").children("span").fadeIn(200);
});
});
});
}, 2000);
});
});
});
});
});
});
});
});
});Written by: Piyush Patil
Code Credits:Ā @aaroniker
If you have any doubts or any project ideas feel free to Contact Us
Hope you find this post helpfulš
