Realize the CSS loading effect after clicking the button

Since there is a button in my company's product that has a one or two second waiting time after clicking (to send a verification email), in order to avoid the one or two second loading window after clicking, I made a loading animation to enhance the user experience. I originally wanted to solve it directly with a gif, but I wanted to take this opportunity to practice, so I used the CSS gradient effect to achieve it. Unexpectedly, the effect is quite good, and there is no need to add additional elements such as div. It can be completed by simply modifying the CSS and adding click events.

Effect Demonstration

Let’s take a look at the finished effect first.

Implementation process

This effect is actually very easy to create. Let’s first take a look at the original button. It’s just a div with CSS applied.

HTML:

<div class="btn">click me</div>

CSS:

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

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

So how do you add animation on it? At this time, you need to use CSS pseudo-elements, cover a before pseudo-element on top, and put the animation in this pseudo-element.

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(100,0,0,1) 0 0 3px;
  background:#c00;
}

After putting on before, you will find that the original one is covered.

After understanding the principle, the next step is to change the background of before to animation. Two CSS3 techniques are used here. The first is the gradient background, and the second is animation. The first gradient color is more complicated. The main thing is to let the gradient fill in a 45-degree manner. The content is that the two colors match each other, but it must be coordinated with background-size so that the gradient can be smoothly connected. This is usually the place that takes the longest time to adjust.

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;

As you can see from the picture below, if you don’t adjust it step by step, the resulting appearance may not be well connected, but if the adjustments are completed, the connection will be smooth.

After completion, you need to apply the CSS3 animation effect to change the background-position, and the background will change automatically.

animation:click 1s infinite linear;    

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

At this point, 80% of the work is done. The last step is to add a click event. What I do here is to hide the pseudo-element with display:none, and then add a class called click. When you click the button, the button will be applied with the click class, and the pseudo-element will appear. The following is the complete code, but it has been simplified a bit, and the button will return to its original state after 2 seconds of clicking.

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(100,0,0,1) 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;
  }
}

jQuery:

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

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.