There is a button in our product that will wait for one or two seconds (sending a certification letter) after being clicked. Therefore, in order to avoid the loading time gap of one or two seconds after being clicked, WE did loading animation to enhance user experience. Originally, we wanted to use a GIF to solve the problem, but we also wanted to use this opportunity to practice. I used the CSS gradient effect to achieve this, but the effect is quite good, and there is no need to add additional elements such as divs, just modify the CSS and add click events.

Results demonstrate

Let’s take a look at the finished product.

The implementation process

This effect is actually very easy, first look at the original button looks, just a DIV with CSS.

HTML:

<div class="btn">click me</div>Copy the code

CSS:

.btn{
  position:relative;
  width:200px;
  height:30px;
  line-height:30px;
  text-align:center;
  border-radius:3px;
  background:#5ad;
  color:#fff;
  cursor:pointer;
}Copy the code

It would look like this (just very simple CSS) :



So how do you animate it? To do this, use the CSS fake element, put a before fake element on top of it, and put the animation inside it.

CSS:

.btn::before{
  content:"loading";
  position:absolute;
  width:200px;
  height:30px;
  line-height:30px;
  text-align:center;
  border-radius:3px;
  z-index:2;    
  top:0;
  left:0;
  color:#fff;
  text-shadow:rgba,0,0,1 (100)0 0 3px;
  background:#c00;
}Copy the code

When you put before, you find that the original is overwritten.

Two CSS3 techniques are used here. The first is the gradient background, and the second is animation. The first gradient is more complicated, which is mainly to fill the gradient with 45 degrees. To make the gradients fit together smoothly, this is usually where the adjustment takes the longest.

background:linear-gradient(45deg.#fc0 0%,#fc0 20%,#fa0 20%, #fa0 45%,#fc0 45%,#fc0 70%,#fa0 70%, #fa0 95%,#fc0 95%,#fc0100%).background-size:30px 30px;
background-position: 0 0;Copy the code

As can be seen from the following figure, if there is no step by step adjustment, the appearance may not be well connected, the adjustment will be very smooth.



After that, you should apply CSS3 animation effect, let background-position change, the background will automatically change.

animation:click 1s infinite linear;    

@keyframes click {
  0%{
    background-position:0 0;
  }
  100%{
    background-position:30px 0; }}Copy the code

I’m actually 80 percent done here, and the last step is to add the click event, so what I’m going to do here is I’m going to hide the fake element with display: None, and then I’m going to create a new class called click, and when I click the button, the button will apply click’s class, and the fake element will appear, Here is the complete code, with some simplification and the fact that after 2 seconds of clicking, the button is restored.

CSS:

.btn..btn::before{
  width:200px;
  height:30px;
  line-height:30px;
  text-align:center;
  border-radius:3px;
}
.btn{
  position:relative;
  background:#5ad;
  color:#fff;
  cursor:pointer;
}
.btn::before{
  content:"loading";
  position:absolute;
  display:none;
  z-index:2;
  top:0;
  left:0;
  color:#fff;
  text-shadow:rgba,0,0,1 (100)0 0 3px;
  background:linear-gradient(45deg,#fc0 0%,#fc0 20%,#fa0 20%, #fa0 45%,#fc0 45%,#fc0 70%,#fa0 70%, #fa0 95%,#fc0 95%,#fc0 100%);
  background-size:30px 30px;
  background-position:0 0;
  animation:click 1s infinite linear;
}
.btn.click::before{
  display:block;
}
@keyframes click {
  0%{
    background-position:0 0;
  }
  100%{
    background-position:30px 0; }}Copy the code

Jquery:

$(function(){
  var timer;
  $('.btn').on('click'.function(){$('.btn').addClass('click');
    clearTimeout(timer);
    timer = setTimeout(function(){$('.btn').removeClass('click');
    },2000);
  });
});Copy the code