svg圆圈loading的实现

最新推荐文章于 2024-05-11 09:55:50 发布

userkang

最新推荐文章于 2024-05-11 09:55:50 发布

阅读量1.9k

点赞数

分类专栏： css 文章标签： loading svg

本文链接：https://blog.csdn.net/userkang/article/details/84755729

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
  <head>
    <meta
      name="viewport"
      content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title></title>
    <style type="text/css">
      .loading-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -21px;
        margin-left: -21px;
      }
      .circular {
        width: 42px;
        height: 42px;
        animation: loading-rotate 2s linear infinite;
      }
      .path {
        animation: loading-dash 1.5s ease-in-out infinite;
        stroke-dasharray: 90 120;
        stroke-dashoffset: 0;
        stroke-width: 2;
        stroke: #222;
        stroke-linecap: round;
      }
      @keyframes loading-dash {
        0% {
          stroke-dasharray: 1 200;
          stroke-dashoffset: 0;
        }
        50% {
          stroke-dasharray: 90 150;
          stroke-dashoffset: -40px;
        }
        100% {
          stroke-dasharray: 90 150;
          stroke-dashoffset: -120px;
        }
      }

      @keyframes loading-rotate {
        to {
          transform: rotate(1turn);
        }
      }
    </style>
  </head>
  <body>
    <div class="loading-wrapper">
      <svg viewbox="0 0 50 50" class="circular">
        <circle cx="25" cy="25" r="20" fill="none" class="path"></circle>
      </svg>
    </div>
  </body>
</html>