How to Upload CSS Animation with JavaScript
How we can create an uploading animation using HTML, CSS, and JS? Solution: See this CSS Upload Animation With JavaScript, Uploading Animation Effect.
Today you will learn to create an Uploading Animation Effect. Basically there is a rounded rectangle with a text “Drop Here” and dark background color. When you will click on the rectangle then your file manager will open to browse or select a file. After selecting any file, you will see circle progress over the rounded-rectangle field after complete progress a tick icon will reveal.
So, Today I am sharing CSS Upload Animation With JavaScript. There I have used pure JavaScript for creating some important functions for the program like drag and drop. And the animation effect is completely based on CSS, there is no library. You can use this animation by integrating with backend for showing actual progress, because it is a dummy.
CSS Upload Animation With JavaScript Source Code
Before sharing source code, let’s talk about it. First I have created the layout by creating the main div and placed other elements inside it. Inside the main div, I have placed a file input, two divs, and two SVG shapes. The first SVG shape is a circle for showing progress and the second one is for tick mark or icon.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. I gave the elements like rectangle, loading icon, and tick icon size by giving width and height. There I have used CSS variables to store values and easy work. In the whole animation, I have mostly used CSS transiton command. And for creating the animation effect I have used @keyframe property.
JavaScript handling here the drag and drop feature. This feature is based on JS dragover command and fetched the upload section using document.querySelector command. Left all other things you will understand after getting the codes, I can’t explain fully in writing. For creating this program you have to create 3 files. First file for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Upload Animation | Webdevtrick.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto&display=swap'>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="upload">
<input type="file" title="" class="drop-here">
<div class="text text-drop">drop here</div>
<div class="text text-upload">uploading</div>
<svg class="progress-wrapper" width="300" height="300">
<circle class="progress" r="115" cx="150" cy="150"></circle>
</svg>
<svg class="check-wrapper" width="130" height="130">
<polyline class="check" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
</svg>
</div>
<script src="function.js"></script>
</body>
</html>
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
body {
background: #E8EBF3;
height: 100vh;
font-family: 'Roboto', sans-serif;
font-size: 16px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.upload {
--background: #212121;
--text-drop: #fff;
--text-upload: #fff;
--progress-color: #fff;
--check-color: var(--text-upload);
--border-radius: 30px;
width: 250px;
height: 250px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.upload::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: var(--background);
border-radius: var(--border-radius);
transition: all .3s ease-out;
box-shadow: var(--shadow-x, 0px) var(--shadow-y, 1px) var(--shadow-blur, 3px) rgba(0, 0, 0, 0.1);
-webkit-transform: scale(var(--scale, 1));
transform: scale(var(--scale, 1));
}
.upload .drop-here {
position: absolute;
width: 100%;
height: 100%;
outline: none;
border-radius: var(--border-radius);
opacity: var(--opacity, 0);
overflow: hidden;
cursor: pointer;
text-indent: -9999px;
z-index: 1;
}
.upload .text {
position: absolute;
font-size: 21px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
}
.upload .text.text-drop {
color: var(--text-drop);
opacity: var(--opacity, 1);
transition: opacity .15s ease-out .15s;
}
.upload .text.text-upload {
color: var(--text-upload);
opacity: var(--opacity, 0);
transition: opacity .15s ease-out;
}
.upload .progress-wrapper {
position: absolute;
}
.upload .progress-wrapper .progress {
fill: none;
stroke: var(--progress-color);
stroke-width: 3;
stroke-dasharray: 722;
stroke-dashoffset: 722;
}
.upload .check-wrapper {
position: absolute;
opacity: var(--opacity, 0);
-webkit-transform: scale(var(--scale, 0.9)) rotate(var(--rotate, 3deg));
transform: scale(var(--scale, 0.9)) rotate(var(--rotate, 3deg));
transition: opacity .15s ease-in, -webkit-transform .15s ease-in-out;
transition: transform .15s ease-in-out, opacity .15s ease-in;
transition: transform .15s ease-in-out, opacity .15s ease-in, -webkit-transform .15s ease-in-out;
}
.upload .check-wrapper .check {
width: 100px;
width: 100px;
fill: none;
stroke: var(--check-color);
stroke-width: 7;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 100 0;
stroke-dashoffset: 100;
}
.upload .shadow {
opacity: var(--opacity, 0);
overflow: hidden;
position: absolute;
height: 100%;
width: 100%;
border-radius: var(--border-radius);
-webkit-filter: blur(25px);
filter: blur(25px);
z-index: -1;
transition: all .5s ease;
}
.upload .shadow::before {
content: '';
position: absolute;
top: -25%;
left: -25%;
height: 150%;
width: 150%;
-webkit-animation: shadow-animate 5s linear infinite;
animation: shadow-animate 5s linear infinite;
}
.upload.drag {
--scale: 1.03;
--shadow-y: 5px;
--shadow-blur: 20px;
}
.upload.drop .text.text-drop {
--opacity: 0;
transition: opacity .15s ease-out;
}
.upload.drop .text.text-upload {
--opacity: 1;
transition: opacity .15s ease-out .15s;
}
.upload.drop .shadow {
--opacity: 1;
}
.upload.drop .progress-wrapper {
opacity: var(--opacity, 1);
-webkit-transform: scale(var(--scale, 1)) rotate(var(--rotate, -90deg));
transform: scale(var(--scale, 1)) rotate(var(--rotate, -90deg));
}
.upload.drop .progress-wrapper .progress {
-webkit-animation: progress 3s ease .3s forwards;
animation: progress 3s ease .3s forwards;
}
.upload.done {
--opacity: 0;
}
.upload.done .text.text-upload {
--opacity: 0;
}
.upload.done .shadow {
--opacity: 0;
}
.upload.done .progress-wrapper {
--scale: .95;
transition: opacity .3s, -webkit-transform .3s;
transition: transform .3s, opacity .3s;
transition: transform .3s, opacity .3s, -webkit-transform .3s;
}
.upload.done .check-wrapper {
--opacity: 1;
--scale: 1;
--rotate: 0deg;
transition: opacity .5s ease-in .3s, -webkit-transform .5s ease-in-out .3s;
transition: transform .5s ease-in-out .3s, opacity .5s ease-in .3s;
transition: transform .5s ease-in-out .3s, opacity .5s ease-in .3s, -webkit-transform .5s ease-in-out .3s;
}
.upload.done .check-wrapper .check {
-webkit-animation: checkTick .5s ease-in-out .3s forwards;
animation: checkTick .5s ease-in-out .3s forwards;
}
@keyframes progress {
0% {
stroke-dashoffset: 722;
}
20% {
stroke-dashoffset: 500;
}
50% {
stroke-dashoffset: 322;
}
55% {
stroke-dashoffset: 300;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes checkTick {
0% {
stroke-dasharray: 0 100;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 100 0;
stroke-dashoffset: 100;
}
}
function.js
The final step, Create a JavaScript file named ‘function.js‘ and put the codes.
var fileUpload = document.querySelector(".upload");
fileUpload.addEventListener("dragover", function() {
this.classList.add("drag");
this.classList.remove("drop", "done");
});
fileUpload.addEventListener("dragleave", function() {
this.classList.remove("drag");
});
fileUpload.addEventListener("drop", start, false);
fileUpload.addEventListener("change", start, false);
function start() {
this.classList.remove("drag");
this.classList.add("drop");
setTimeout(() => this.classList.add("done"), 3000);
}
That’s It. Now you have successfully created CSS Upload Animation With JavaScript, Drag and Drop Uploading Animation Effect. If you have any doubt or question comment down below.
Thanks for reading!
#css #javascript #input #transition
