This is the third day of my participation in the August More text Challenge. For details, see:August is more challenging

preface

In front end projects that involve uploading/downloading files, how can we better inform the user of the progress when the files are being uploaded/downloaded? We have a common pop-up progress bar, the top of the progress bar…

This chapter will bring you the button progress bar, and hand – in – hand guide you step by step from zero hand – in – hand button progress bar 👨💻

No more words, first look at the finished product and then code

Implementation effect

The principle of

Create a div as the overall button, put 3 div in the button, respectively is the progress bar element, icon element, text element, we will set the button to the relative positioning, the progress bar element is set to the absolute positioning, the use of top and left values to control the progress bar, let us use code!

Code is used to implement

Code out the basic style
<div class="button">
    <span class="text">download</span>
</div>
Copy the code
 .button {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 160px;
        height: 40px;
        color: black;
        background: white;
        border-radius: 10px;
        margin: 0 15px;
        font-size: 18px;
        text-decoration: none;
        overflow: hidden;
    }
Copy the code

Soon, we have the basic style of our button written out. Next, let’s implement the progress bar effect by creating a span tag under the.button element and binding it to the progress class name as the progress bar element. Pseudo-elements cannot be used here, because we will need JavaScript later to control the state of the button. Pseudo-elements cannot be found through JavaScript.

I will have an article on pseudo-elements in the future to keep me from getting lost 😉 😉

<div class="button">
    <span class="text">download</span>
    <span class="progress"></span>
</div>
Copy the code

Style the progress bar element

.progress {
    content: ' ';
    position: absolute;
    top: 90%;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #4776E6; 
    background: -webkit-linear-gradient(to right, #8E54E9, #4776E6); 
    background: linear-gradient(to right, #8E54E9, #4776E6); 
    transition: all 4s;
  }
Copy the code

Let’s comment out the Overflow hidden property and see that the progress element is below the left of the button element. 10% of the height of the exposure is shown in the visible range of the button. The left value of the.progress element is controlled by the JavaScript API.

Code out download effect

We use the JavaScript querySelectorAll method to get the.button and.progress elements, and.text elements.

const btn = document.querySelectorAll('.button') [0];
const pr = document.querySelectorAll('.progress') [0];
const text = document.querySelectorAll('.text') [0];
Copy the code

Add a click event to the. Button element. When the button is clicked, we set the left value of the button to 0, which is 100% progress.

btn.addEventListener('click'.() = > {
  pr.style.left = '0';
});
Copy the code

Next, when we set the overflow property of the button element to hidden.

At this point, we have the progress bar, but we are still a little bit off from the image. When the progress bar reaches 100%, we need to set the top value of the.progress element to 0 and move the whole block up. Add the following code after the click event:

setTimeout(() = > {
  pr.style.top = '0';
  pr.style.transitionDuration = '1s';
  text.style.color = 'white';
  text.innerText = 'downloaded';
}, 4000);
Copy the code

In addition, after the.progress element is moved up it will overwrite our.text element, so we need to move the.text level up.

.text{
        z-index: 10;
    }
Copy the code

The introduction of the icon

Introduce font Awesome into HTML.

  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet">
Copy the code

The ICONS we need to use are:

<i class="fa fa-arrow-down" aria-hidden="true"></i>
<i class="fa fa-download" aria-hidden="true"></i>
<i class="fa fa-check" aria-hidden="true"></i>
Copy the code

We insert this I label into the.button element, again setting the level to 10 so that the icon is not overwritten by the progress bar element.

<i class="fa fa-arrow-down" aria-hidden="true"></i>
Copy the code
i {
    margin: 0 8px 0 0;
    font-size: 16px;
    z-index: 10;
  }
Copy the code

Set a loop animation for the icon, which can be used to catch the user’s eye and prompt them to click on it.

@keyframes tapDownload {
  0% {
    transform: translateY(2px);
  }
  100% {
    transform: translateY(0); }}.fa-arrow-down{
    animation: tapDownload 1s ease infinite;
}
Copy the code

Will users be more likely to click after adding this effect?

Dynamic change icon

Again, we use the querySelectorAll method in JavaScript to get the icon element.

const icon = document.querySelectorAll('.fa') [0];
Copy the code

By comparing the above three icon elements, we find that they all have the same class name fa, but the difference is the fa-* class. When the state of the button changes, remove the corresponding class name and add a new class name. Add the following code in the button click event:

btn.addEventListener('click'.() = > {
  pr.style.left = '0';
  icon.classList.remove('fa-arrow-down');
  icon.classList.add('fa-download');
  text.innerText = 'downloading';
  setTimeout(() = > {
    // Omitted some code
    icon.style.color = 'white';
    icon.classList.remove('fa-download');
    icon.classList.add('fa-check');
  }, 4000);
});
Copy the code

During the download process, we attach a frame animation to the FA-Download class of the download icon.

@keyframes downloading {
  0% {
    transform: scale(.7);
  }
  100% {
    transform: scale(1); }}.fa-download {
    animation: downloading 1s ease infinite alternate-reverse;
  }
Copy the code

The last

This article takes you from zero implementation to a progress bar button, using the front end of the three-piece HTML CSS JavaScript progress bar button development. Also introduced is the Font Awesome library. I hope you can learn from it and write better and cooler animation effects,

😉 Leave a like if you found this article helpful to you 😉