手写loading动画

作者: percykuang | 来源:发表于2020-05-24 09:57 被阅读0次

手写loading动画
面试
NVActivityIndicatorView
loading...
好玩的CSS动效~
Vue第三方插件使用
Flutter Animations动画效果合集(全网最全)
如何在 Mac 上实现环形 loading 动画
一些常用动画
Android自定义进度条

圆环旋转

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    .container {
      display: flex;
      justify-content: center;
    }

    .circle {
      margin-top: 100px;
      width: 30px; height: 30px;
      border: 5px solid #999;
      border-top: 5px solid #000;
      border-radius: 50%;
      animation: spin 1s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    @keyframes spin {
      0% {
        transform: rotateZ(0deg);
      }
      100% {
        transform: rotateZ(360deg);
      }
    }

  </style>
</head>
<body>
    <div class="container">
      <div class="circle"></div>
    </div>
</body>
</html>

效果如下：

May-24-2020 09-54-29.gif

矩形伸缩

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    .loading {
      margin-top: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .loading > .rectangle {
      width: 6px; height: 60px;
      background-color: #a4d09f;
      animation-name: stretchHeight;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-duration: 1.2s;
    }

    .loading .rectangle:nth-child(2) {
      animation-delay: -1.1s;
    }

    .loading .rectangle:nth-child(3) {
      animation-delay: -1s;
    }

    .loading .rectangle:nth-child(4) {
      animation-delay: -0.9s;
    }

    .loading .rectangle:nth-child(5) {
      animation-delay: -0.8s;
    }

    @keyframes stretchHeight {
      0%, 40%, 100% {
        transform: scaleY(0.4);
      }
      20% {
        transform: scaleY(1);
      }
    }
  </style>
</head>
<body>
  <div class="loading">
    <div class="rectangle"></div>
    <div class="rectangle"></div>
    <div class="rectangle"></div>
    <div class="rectangle"></div>
    <div class="rectangle"></div>
  </div>
</body>
</html>

效果如下：

May-24-2020 09-55-29.gif

矩形伸缩（加强版）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>

      .wrapper {
        background: rgba(52, 173, 181, .1);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
      }

      .loading .rectangle {
        width: 6px; height: 60px;
        background-color: #34ADB5;
        animation-name: stretchHeight;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-duration: 1.2s;
      }

      .loading .rectangle:nth-child(2) {
        animation-delay: -1.1s;
      }

      .loading .rectangle:nth-child(3) {
        animation-delay: -1s;
      }

      .loading .rectangle:nth-child(4) {
        animation-delay: -0.9s;
      }

      .loading .rectangle:nth-child(5) {
        animation-delay: -0.8s;
      }

      @keyframes stretchHeight {
        0%, 40%, 100% {
          transform: scaleY(0.4);
        }
        20% {
          transform: scaleY(1);
        }
      }

      .wriggle {
        display:flex;
        align-items: center;
        justify-content: center;
      }

      .tip {
        color: #34ADB5;
        margin-top: 4px;
      }
    </style>

  </head>
  <body>
    <div class="wrapper">
      <div class="loading">
        <div class="wriggle">
          <div class="rectangle"></div>
          <div class="rectangle"></div>
          <div class="rectangle"></div>
          <div class="rectangle"></div>
          <div class="rectangle"></div>
        </div>
        <div class="tip">Loading...</div>
      </div>
    </div>
  </body>
</html>

效果如下：

3.gif

仿Ant Design UI的Loading

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
    }
    @keyframes autoRotate {
      100% {
        transform: rotateZ(405deg);
      }
    }
    .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
    }
    .spin {
      position: relative;
      font-size: 20px;
      width: 1em; height: 1em;
      display: flex;
      flex-wrap: wrap;
      transform: rotateZ(45deg);
      animation: autoRotate 1.2s infinite linear;
    }
    .spin .circle {
      display: block;
      width: 10px; height: 10px;
      border-radius: 100%;
      background: #34adb5;
      transform: scale(.75);
      opacity: .3;
    }

  </style>
</head>
<body>
  <div class="wrapper">
    <div class="spin">
      <span class="circle"></span>
      <span class="circle"></span>
      <span class="circle"></span>
      <span class="circle"></span>
    </div>
  </div>
</body>
</html>

效果如下：

4.gif