Recently, I used React to write my personal site, but found a large blank screen at the beginning of the project loading, which I thought was not very good and needed to be optimized. Then antD spin was used in the project, so HTML + CSS was used to implement the homepage

The effect

Analysis of the

It is mainly divided into the following parts:

1. Loading needs to be centered

There are many intermediate methods, such as parent and child, elastic box model and so on. Antd official implementation is as follows:

     position: absolute;
      left: 50%;
      top: 50%;
      bottom: 0;
      right: 0;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-color: #f0ebeb;
      width: 100%;
      height: 100%;
      cursor: pointer;
Copy the code

2. Content area

The content area is divided into two parts, one for rotation and the other for text. The layout is also very simple, just two blocks, or inline-block, will do

Rotating area

See that it is rotating, so it must need a container wrapped with four labels, and then the outermost container to rotate, the rotation Angle we can see is 45deg, but if you directly write rotation 45deg, you will find that the animation is very hard, not smooth at all

The solution

There are several solutions:

  1. I’m going to add transition to the rotation
  2. The Angle of rotation is theta(360 + 45) DEgSo the rotation will be smooth, and the time, on average, is 0.4 seconds, so it’s 1.2 seconds, why 0.4 seconds here, because there will be a flash animation later

Flicker how to do

Opacity is also shown to start with a smaller opacity, and is set to 1 when it is rotated to the current. One detail is that each point takes a different amount of time to animate, so each point has a 0.4s delay based on the previous point

Text area

The text area is not difficult

The source code is as follows:

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Manually implement a loading of ANTD spin</title>
  <style>
    .my-loading-container {
      position: absolute;
      left: 50%;
      top: 50%;
      bottom: 0;
      right: 0;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-color: #f0ebeb;
      width: 100%;
      height: 100%;
      cursor: pointer;
      font-size: 14px;
    }

    .my-loading-span {
      position: relative;
      display: inline-block;
      font-size: 32px;
      width: 1em;
      height: 1em;
      transform: rotateZ(45deg);
      transition: transform .3s cubic-bezier(.78.14.15.86);
      animation: Rotate45 1.2 s infinite linear;
    }

    .my-loading-span>i {
      height: 14px;
      width: 14px;
      background-color: #00D8FF;
      display: block;
      position: absolute;
      border-radius: 100%;
      transform: scale(.75);
      transform-origin: 50% 50%;
      opacity:.3;
      animation: myAnimationMove 1s infinite linear alternate;
    }

    .my-loading-span:nth-child(1) {
      top: 0;
      left: 0;
    }

    .my-loading-span :nth-child(2) {
      top: 0;
      right: 0;
      animation-delay:.4s;
    }

    .my-loading-span :nth-child(3) {
      bottom: 0;
      right: 0;
      animation-delay:.8s;
    }

    .my-loading-span :nth-child(4) {
      left: 0;
      bottom: 0;
      animation-delay: 1.2 s;
    }

    .my-loading-container>.my-text-container {
      padding-top: 5px;
      text-shadow: 0 1px 2px #fff;
      color: #00D8FF;
      font-variant: tabular-nums;
      font-feature-settings: 'tnum';
      font-size: 14px;
    }

    @keyframes Rotate45 {
      to {
        transform: rotate(405deg); }}@keyframes myAnimationMove {
      to {
        opacity: 1; }}</style>
</head>

<body>
  <div class="my-loading-container" id="myLoadingContainer">
    <span class="my-loading-span">
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </span>
    <div class="my-text-container">
      Loading...
    </div>
  </div>
</body>

</html>
Copy the code