“This is the third day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021.”

A progress bar, you’ve probably all seen it before, a fixed-width container with a percentage of progress in it, that’s a progress bar.

CSS + HTML can be very simple to implement the progress bar function, let’s look at a simple example

The sample a

<div class="progress" id="progress1"></div>
Copy the code

css

#progress1{
  position: relative;
  width: 200px;
  height: 20px;
  background: #dfdfdf;
}

#progress1:before{
  position: absolute;
  width: 20%;
  height: 100%;
  background: blueviolet;
  content: &# 039;20%&# 039;;
  color: #fff;
  font-size: 12px;
  text-align: center;
}
Copy the code

Thus, a not very beautiful progress bar comes out, is not very simple.

Now I’m going to add an animation effect to make the progress bar move

@keyframes aw{
  from{
    width: 0
  }
  to{
    width: 100%}}#progress1:before{
  ...
  animation: aw 5s forwards;
}
Copy the code

Change the width of the pseudo-class :before to animate, and at the same time keep animation behind the last frame animation-fence-mode: forward; (Here is a direct shorthand, after the animation)

Example 2

<div class="progress" id="progress2">loading...</div>
Copy the code

css

#progress2{
  position: relative;
  width: 200px;
  height: 20px;
  background: #97ddff;
  margin-top: 20px;
}
#progress2:before{
  position: absolute;
  content: &# 039; &# 039;;
  height: 2px;
  background: blueviolet;
  top: -2px;
  animation: aw 5s forwards;
  left: 0;
}
#progress2:after{
  position: absolute;
  content: &# 039; &# 039;;
  height: 2px;
  background: blueviolet;
  bottom: -2px;
  animation: aw 5s forwards;
  left: 0;
}
Copy the code

The hover event has the same effect as the button :hover event

Example 3

<div class="progress" id="progress3"></div>
Copy the code

css

#progress3{
  position: relative;
  width: 100px;
  height: 100px;
  background: #97ddff;
  margin-top: 100px;
}
#progress3:before{
  position: absolute;
  content: &# 039; &# 039;;
  height: 100%;
  background: blueviolet;
  animation: aw 5s forwards;
}
#progress3:after{
  position: absolute;
  content: &# 039; &# 039;;
  height: 5px;
  width: 5px;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  background: blueviolet;
  animation: surround 5s forwards;
}
@keyframes surround {
  0%{
    top: -10px;
    left: 10px;
  }
  25%{
    top: -10px;
    left: 110px;
  }
  50%{
    top: 110px;
    left: 110px;
  }
  75%{
    top: 110px;
    left: -10px;
  }
  100%{
    top: -10px;
    left: -10px; }}Copy the code

Here are two animations, one by:beforeThe width changes, and:afterAnimation effect formed by surround motion

Move around, calculate the 4 coordinate points, and divide the time equally.

Also, we can optimize the :before animation from 100% to 0 if width is 100%.

Let’s make the animation permanent

/* Animation number of times */
animation-iteration-count: n|infinite;
Copy the code

@keyframes alrw{
  0%{
    width: 0;
    left: 0;
  }
  25%{
    width: 100%;
    left: 0;
  }
  50%{
    width: 100%;
  }
  51%{
    width: 0%;
    right: 0;
  }
  75%{
    right: 0;
    width: 100%;
  }
  100%{
    width: 100%; }}Copy the code

summary

This summary does not seem to pay special attention to knowledge points, but can also sum up the following 2 points

1. Use of CSS pseudo-classes

Animation animation (only executed once: forward, infinite executed forever)

If you have any questions, please leave them in the comments section. Need source partners can buy, private letter I oh.

Thank you all for your continued support.