How to Upload CSS Animation with JavaScript

How to Upload CSS Animation with JavaScript

CSS Upload Animation With JavaScript Source Code 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.

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&amp;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

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Detect the End of CSS Animations and Transitions with JavaScript

In JavaScript, we can call the callback function once the animation is done. But in CSS, there is no option to perform any action after the end of the transition/animation. it's possible to detect the end of a CSS transition or ... Then bind the event with jQuery's one function, which ensures that it runs

Countdown with HTML, CSS, and JavaScript / How to create JavaScript Countdown

Countdown with HTML, CSS, and JavaScript / How to create JavaScript Countdown. W will build a Responsive Website with HTML, CSS, and JavaScript

Learn to use variables in CSS (CSS Tricks)

whats the variable in CSS, how to declare use them. Whats the benefit of variables in CSS. Lets learn all this. #Variables #CSS #HTML #CssVariables #ITArticles

CSS Button Generator (Mini) using HTML, CSS, and JavaScript

Learn how to create a mini CSS Button generator just by using HTML, CSS, and JavaScript. We will only cover some properties related to the button but you can use other properties to allow users to play around with different styles and designs.

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview