Upload button animation using HTML CSS and JavaScript - Coding Torque

byPiyush Patil -
0
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 more projects for you:

1. Todo App using JavaScript

2. Tip Calculator using JavaScript

3. QR Code Generator using JavaScript

I would recommend you don't just copy and paste the code, just look at the code and type by understanding it.


Let's go step by step:

Step 1: 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>


Step 2: CSS(SCSS) Code

Create a file style.less 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%);
}

Step 3: JavaScript Code

Create a file script.js and paste the code below.

Note: You have to import JQuery library in your HTML body before the javascript code. (I have already imported JQuery CDN in the above starter template). 

$(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);
                                });
                            });
                        });
                    });
                });
            });
        });
    });
});
Code Credits: @aaroniker

Written by: Coding Torque | Piyush Patil

If you want me to code any project or post any specific post, feel free to DM me at IG @code.scientist or @codingtorque

If you have any doubts or any project ideas feel free to Contact Us 

Hope you find this post helpful💖 
 
 Follow us on Instagram for more projects like this👨‍💻 

Tags:

Post a Comment

Previous Post Next Post