CSS Upload Animation With JavaScript | Uploading Animation Effect

How we can create an uploading animation using HTML, CSS, and JS? Solution: See this CSS Upload Animation With JavaScript, Uploading Animation Effect.

Previously I have shared JavaScript Custom Upload input, but this is just an animation for uploading period. Basically, when we upload files of photos on any website like social media, then there is a type of animation shows the upload process. Those animations are connected to backend and show actual progress. But this program is a dummy for showing how we can create these.

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.

If you are thinking now how this upload animation actually is, then see the preview given below.

Preview Of Drag & Drop Uploading Animation Effect

See this video preview to getting an idea of how the animation looks like.

Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

You May Also Like:

• JavaScript Typing Effect
• Parallax Tilt Effect Card
• Drag and Drop List
• Moving Text Mask On Hover

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 (info). 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.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

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 Visiting, Keep Visiting.