纯css实现loading效果

岁月如歌_
已于 2022-09-17 17:01:11 修改
阅读量259
点赞数
文章标签： html css 前端
于 2022-09-17 17:00:44 首次发布
原文链接：https://mp.weixin.qq.com/s/WT5xXt5IEPHKx9WQLzu3dw
版权
<!DOCTYPE html>
<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>Document</title>
    <style>
      .progress-1 {
        width: 120px;
        height: 20px;
        background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd;
        animation: p1 2s infinite linear;
      }
      @keyframes p1 {
        100% {
          background-size: 100%;
        }
      }

      .progress-9 {
        --r1: 154%;
        --r2: 68.5%;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: radial-gradient(
              var(--r1) var(--r2) at top,
              #0000 79.5%,
              #269af2 80%
            )
            center left,
          radial-gradient(
              var(--r1) var(--r2) at bottom,
              #269af2 79.5%,
              #0000 80%
            )
            center center,
          radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%)
            center right,
          #ccc;
        background-size: 50.5% 220%;
        background-position: -100% 0%, 0% 0%, 100% 0%;
        background-repeat: no-repeat;
        animation: p9 2s infinite linear;
      }
      @keyframes p9 {
        33% {
          background-position: 0% 33%, 100% 33%, 200% 33%;
        }
        66% {
          background-position: -100% 66%, 0% 66%, 100% 66%;
        }
        100% {
          background-position: 0% 100%, 100% 100%, 200% 100%;
        }
      }

      .progress-8 {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        -webkit-mask: linear-gradient(0deg, #000 55%, #0000 0) bottom/100%
          18.18%;
        background: linear-gradient(#f03355 0 0) bottom/100% 0% no-repeat #ddd;
        animation: p8 2s infinite steps(7);
      }
      @keyframes p8 {
        100% {
          background-size: 100% 115%;
        }
      }

      .progress-7 {
        width: 120px;
        height: 24px;
        -webkit-mask: radial-gradient(circle closest-side, #000 94%, #0000) 0 0/25%
            100%,
          linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px)
            no-repeat;
        background: linear-gradient(#25b09b 0 0) 0/0% no-repeat #ddd;
        animation: p7 2s infinite linear;
      }
      @keyframes p7 {
        100% {
          background-size: 100%;
        }
      }

      .progress-6 {
        width: 120px;
        height: 22px;
        border-radius: 20px;
        color: #514b82;
        border: 2px solid;
        position: relative;
      }
      .progress-6::before {
        content: "";
        position: absolute;
        margin: 2px;
        inset: 0 100% 0 0;
        border-radius: inherit;
        background: #514b82;
        animation: p6 2s infinite;
      }
      @keyframes p6 {
        100% {
          inset: 0;
        }
      }

      .progress-5 {
        width: 80px;
        height: 40px;
        border: 2px solid #000;
        padding: 3px;
        background: repeating-linear-gradient(90deg, #000 0 10px, #0000 0 16px)
          0/0% no-repeat content-box content-box;
        position: relative;
        animation: p5 2s infinite steps(6);
      }
      .progress-5::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        border: 2px solid #000;
      }
      @keyframes p5 {
        100% {
          background-size: 120%;
        }
      }

      .progress-4 {
        width: 120px;
        height: 20px;
        -webkit-mask: linear-gradient(90deg, #000 70%, #0000 0) 0/20%;
        background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd;
        animation: p4 2s infinite steps(6);
      }
      @keyframes p4 {
        100% {
          background-size: 120%;
        }
      }

      .progress-3 {
        width: 120px;
        height: 20px;
        border-radius: 20px;
        background: repeating-linear-gradient(
              135deg,
              #f03355 0 10px,
              #ffa516 0 20px
            )
            0/0% no-repeat,
          repeating-linear-gradient(135deg, #ddd 0 10px, #eee 0 20px) 0/100%;
        animation: p3 2s infinite;
      }
      @keyframes p3 {
        100% {
          background-size: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="progress-1"></div>
    <div class="progress-9"></div>
    <div class="progress-8"></div>

    <div class="progress-7"></div>

    <div class="progress-6"></div>

    <div class="progress-5"></div>

    <div class="progress-4"></div>

    <div class="progress-3"></div>
  </body>
</html>