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!

Detect the End of CSS Animations and Transitions with JavaScript

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

Before CSS transition and animation (keyframes), to animate, we needed to code in JavaScript. But once these two properties were introduced, we can achieve complex animations with only CSS.

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.

Whenever the transition is finished, the transitionend event will be triggered. We can use this event to find the end of the transition. We can also use it like ontransitionend.

If the browser is WebKit-based then we need to define the prefix for the event.

 "transition"      : "transitionend",
    "OTransition"     : "oTransitionEnd", // opera
    "MozTransition"   : "transitionend", // mozilla
    "WebkitTransition": "webkitTransitionEnd"

Let’s create a practical example to detect the end of a transition.

We are going to create a search box that will expand when we focus on the input.

HTML: Create an Input Box
<input type="text" class="search" placeholder = "Enter the text">
CSS: Add Style to the Input Box
.search {
  width : 200px;
  height :30px;
  border :5px solid red;
  border-radius : 10px;
  padding : 10px;
  color : blue;
  outline:none;
  transition : all .3s linear;
}

Once the input box is focused, we need to increase its width.

.expand {
  width : 50vw;
}
JavaScript: Add focus and focusout Listeners
let input = document.querySelector('.search');
input.addEventListener('focus',  function(ev, data) {
  input.classList.add('expand');
});
input.addEventListener('focusout',  function(ev, data) {
  input.classList.remove('expand');
});

This will create an expanding input box.

Now we need to detect the transition end event based on the browser. We can detect that by checking any of the transition events, available in the style attribute of any element.

function getTransitionEndEventName() {
  var transitions = {
      "transition"      : "transitionend",
      "OTransition"     : "oTransitionEnd",
      "MozTransition"   : "transitionend",
      "WebkitTransition": "webkitTransitionEnd"
   }
  let bodyStyle = document.body.style;
  for(let transition in transitions) {
      if(bodyStyle[transition] != undefined) {
          return transitions[transition];
      } 
  }
}

getTransitoin.js

// using above code we can get Transition end event name
let transitionEndEventName = getTransitionEndEventName();

Now, we need to add the event listener once the input is focused. For that, add the event listener inside the focus event callback:

input.addEventListener('focus',  function(ev) {
  input.classList.add('expand');
  input.addEventListener(transitionEndEventName, callback);
});

Once the transition is finished, the callback function will be called.

We also need to remove the transitionend event once the callback is executed, otherwise, the listener will keep running, causing it to run multiple times.

For example: On focusing input, the input box expands. This is one transition, and once the focus is out, the input box shrinks. This is also a transition. So, we need to remove the event listener inside the callback function.

function callback(ev) {
   
    console.log("transition  finished ");
    input.removeEventListener(transitionEndEventName, callback);
}

The complete code:

We can detect the name of the transition using the propertyName attribute in the ev argument of the callback function. We can also find the time taken to end the transition using the elapsedTime property.

Thanks for reading. I hope you liked this.

Teaching CSS to JavaScripters

Teaching CSS to JavaScripters

Teaching CSS to JavaScripters. Some JavaScript professionals do not know CSS as well as they’d like to. In order to help them, PPK decided to write a book “CDD for JavaScripters”, where he will explain CSS in terms that JavaScripters will understand. But what are those terms? What kind of teaching would JavaScripters expect? Is there a CSS mental model that is different from a JavaScript mental model? Is CSS a programming language? Does that matter for teaching or learning CSS?

But what are those terms? What kind of teaching would JavaScripters expect? Is there a CSS mental model that is different from a JavaScript mental model? Is CSS a programming language? Does that matter for teaching or learning CSS?

PPK will give a brief outline of where he’s standing right now on these questions. The majority of the session will be used for a discussion with the audience. How should he teach CSS? Why is it so hard for some to understand it? What are the least-understood parts of CSS? We hope this discussion will yield valuable feedback.

CSS Border Transition Effects

CSS Border Transition Effects

How we can create different types of transition on the element’s border using CSS? Solution: CSS Border Transition Effects On Hover, Border Style Change On Hover.

I am sure that you know about the border, Previously I have shared different types of border outline styles. These all effect are about changing border style on mouseover. There is some example of multiple direction animation fills on the border. All animations are the basic CSS command-based stuff.

Today you will learn to create some kinds of border hover animation using HTML and CSS. In other words, we will create some hover animationthat affects the borders of elements. If you are a beginner no problem, you will understand very easily the codes. There are only 2 main commands controls all the effects.

So, Today I am sharing CSS Border Transition Effects On Hover. There are effects available like normal draw, draw meet, spin, circle spin, etc. Maybe this is a kind of button hover effect, but it works for the change border style. In this post I am sharing 5 types of animation effect, you can create more by understanding the concept.

If you are thinking now how these effects actually are, then see the preview given below.

Preview Of Border Hover Animation

See this video preview to getting an idea of how the border 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:

  • Animated Login Page In HTML
  • Sidebar Menu Reveal
  • Toggle Switch With Checkbox
  • CSS 3D Image Gallery
CSS Border Transition Effects On Hover Source Code

Before sharing source code, let’s talk about it. First, I have created five buttons and put inside the main div. All divs have a different class for giving multiple effects. For example: For the simple line draw effect I have placed <button class="draw">Draw</button> .

Now in the CSS file, I placed all the elements on the right place. For creating the hover effect I have used CSS transition and border-* properties. Border-* properties like border-top, border-left, border-top-color, etc. Also used transform (info) property for rotate and 3D translate.

There are lots of basic CSS codes, I can’t explain all in writing. You will understand easily after getting the codes. For creating this program you have to create only 2 files, one for HTML and one for CSS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CSS Border Transitions | Webdevtrick.com</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Border Transitions Effects</h1>
 
<section class="container">
  <button class="draw">Draw</button>
  <button class="draw meet">Draw Meet</button>
  <button class="center">Center</button>
  <button class="spin">Spin Box</button>
  <button class="spin circle">Spin Circle</button>
</section>
  
</body>
</html>

style.css

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

body {
  background: #fefefe;
  font: 300 24px/1.5 Lato, sans-serif;
  margin: 1em auto;
  max-width: 36em;
  padding: 1em 1em 2em;
  text-align: center;
}
h1 {
  font-weight: 300;
  font-size: 2.5em;
}
.container {
  isolation: isolate;
}
button {
  background: none;
  border: 0;
  box-sizing: border-box;
  margin: 1em;
  padding: 1em 2em;
  box-shadow: inset 0 0 0 2px #f45e61;
  color: #f45e61;
  font-size: inherit;
  font-weight: 700;
  position: relative;
  vertical-align: middle;
}
button::before, button::after {
  box-sizing: inherit;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}
.draw {
  transition: color 0.25s;
}
.draw::before, .draw::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
.draw::before {
  top: 0;
  left: 0;
}
.draw::after {
  bottom: 0;
  right: 0;
}
.draw:hover {
  color: #0eb7da;
}
.draw:hover::before, .draw:hover::after {
  width: 100%;
  height: 100%;
}
.draw:hover::before {
  border-top-color: #0eb7da;
  border-right-color: #0eb7da;
  transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
  border-bottom-color: #0eb7da;
  border-left-color: #0eb7da;
  transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
.meet:hover {
  color: #0eb7da;
}
.meet::after {
  top: 0;
  left: 0;
}
.meet:hover::before {
  border-top-color: #0eb7da;
  border-right-color: #0eb7da;
}
.meet:hover::after {
  border-bottom-color: #0eb7da;
  border-left-color: #0eb7da;
  transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
}
.center:hover {
  color: #0eb7da;
}
.center::before, .center::after {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform-origin: center;
}
.center::before {
  border-top: 2px solid #0eb7da;
  border-bottom: 2px solid #0eb7da;
  transform: scale3d(0, 1, 1);
}
.center::after {
  border-left: 2px solid #0eb7da;
  border-right: 2px solid #0eb7da;
  transform: scale3d(1, 0, 1);
}
.center:hover::before, .center:hover::after {
  transform: scale3d(1, 1, 1);
  transition: transform 0.5s;
}
.spin {
  width: 5em;
  height: 5em;
  padding: 0;
}
.spin:hover {
  color: #0eb7da;
}
.spin::before, .spin::after {
  top: 0;
  left: 0;
}
.spin::before {
  border: 2px solid transparent;
}
.spin:hover::before {
  border-top-color: #0eb7da;
  border-right-color: #0eb7da;
  border-bottom-color: #0eb7da;
  transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.spin::after {
  border: 0 solid transparent;
}
.spin:hover::after {
  border-top: 2px solid #0eb7da;
  border-left-width: 2px;
  border-right-width: 2px;
  transform: rotate(270deg);
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
}
.circle {
  border-radius: 100%;
  box-shadow: none;
}
.circle::before, .circle::after {
  border-radius: 100%;
}

That’s It. Now you have successfully created CSS Border Transition Effects On Hover, Border Hover Animation

Thanks for reading. If you liked this post, share it with all of your programming buddies!

Further reading

☞ The Web Developer Bootcamp

☞ Build Responsive Real World Websites with HTML5 and CSS3

☞ Advanced CSS and Sass: Flexbox, Grid, Animations and More!

☞ Web Design for Beginners: Real World Coding in HTML & CSS

☞ Foundation CSS Framework - Crash Course for Beginners

☞ Animating SVG with CSS

☞ The CSS Handbook: a handy guide to CSS for developers

☞ 11 Amazing CSS You Shouldn’t Miss


Originally published on https://webdevtrick.com