Results show

loading1

loading1

Get a gray box with rounded corners in the middle, just for good looks

<div class="loading-box">
</div>
Copy the code
.loading-box {
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: #d8d8d8;
    border-radius: 5px;
}
Copy the code

Put loading1 and three child elements as the three jump elements in loading1

<div class="loading-box">
    <div class="loading1">
        <div class="loading1-item1"></div>
        <div class="loading1-item2"></div>
        <div class="loading1-item3"></div>
    </div>
</div>
Copy the code

Margin-top centers loading1 up and down, and specifies the height and left-right center of the inline elements

.loading1 {
  height: 34px;
  margin-top: 33px;
  text-align: center;
}
Copy the code

Then set a common style for all three elements, using inline-block to line them up

.loading1-item1, .loading1-item2, .loading1-item3 {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #4b9cdb;
  border-radius: 15px;
}
Copy the code

Writing an animation is as simple as making the height of an element longer and back again

@keyframes loading1-run { 0% { height: 16px; } 50% { height: 34px; } 100% { height: 16px; }}Copy the code

Add the written animation to the three elements, two points: first, set the delay of the three elements to 0S, 0.5s, 1s respectively; second, set infinite (animation loop)

Loading1-item1 {animation: loading1-run 1.5s ease 0s infinite; }. Loading1-item2 {animation: loading1-run 1.5s ease 0.5s infinite; }. Loading1-item3 {animation: loading1-run 1.5s ease 1s infinite; }Copy the code

complete

As long as the code only sets the length change, why does the animation seem to bounce up and down? And when you change the height of an element, it should look like the top is going down, not like the animation where it looks like the bottom is fixed, rising up and coming back up.

The reason is inline-block alignment, where the three elements are aligned to the baseline by default. When 0 s first animation began to grow high, the two have not yet begun to animation elements as the first element of the baseline moved down, after the element every time just want to return to the original position, there is always one of the elements get higher, so each element fixed up high, looks like the bottom of the change in the short gap is caused by the effect of dynamic.

loading2

Get a gray box with rounded corners in the middle, just for good looks

<div class="loading-box">
</div>
Copy the code
.loading-box {
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: #d8d8d8;
    border-radius: 5px;
}
Copy the code

Put loading2 and four child elements as the four rotating elements in loading2

<div class="loading-box">
    <div class="loading2">
      <div class="loading2-item1"></div>
      <div class="loading2-item2"></div>
      <div class="loading2-item3"></div>
      <div class="loading2-item4"></div>
    </div>
</div>
Copy the code

Set the length and width of loading2 and center it by margin

.loading2 {
  position: relative;
  width: 46px;
  height: 46px;
  margin: 27px auto 0 auto;
}
Copy the code

Sets common styles for all four elements

.loading2-item1,
.loading2-item2,
.loading2-item3,
.loading2-item4 {
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background: red;
}
Copy the code

Through absolute positioning, the four elements are positioned to the center of the circle with the midpoint of the four edges, and different colors are added

.loading2-item1 {
  position: absolute;
  top: -8px;
  left: 50%;
  margin-left: -8px;
  background: #CDDC39;
}

.loading2-item2 {
  position: absolute;
  right: -8px;
  top: 50%;
  margin-top: -8px;
  background: #3F51B5;
}

.loading2-item3 {
  position: absolute;
  bottom: -8px;
  left: 50%;
  margin-left: -8px;
  background: #F44336;
}

.loading2-item4 {
  position: absolute;
  left: -8px;
  top: 50%;
  margin-top: -8px;
  background: #4CAF50;
}
Copy the code

Animate, rotate 360 degrees

@keyframes loading2-run { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); }}Copy the code

Add the animation to Loading2, using liner(linear animation), still playing in a loop

.loading2 {
  position: relative;
  width: 46px;
  height: 46px;
  margin: 27px auto 0 auto;
  animation: loading2-run 2s linear 0s infinite;
}
Copy the code

complete

The end of the