用代码实现加载中动图 loading.gif

霜月枫桥

已于 2024-07-01 17:38:13 修改

阅读量244

点赞数 3

文章标签： loading

于 2024-07-01 17:28:56 首次发布

本文链接：https://blog.csdn.net/MOONCOM/article/details/140106222

版权

效果

仅使用html+css，效果如下所示

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>加载中</title>
    <style>
      .el-loading-spinner .circular {
        height: 42px;
        width: 42px;
        animation: loading-rotate 2s linear infinite;
      }
      @keyframes loading-rotate {
        100% {
          transform: rotate(1turn);
        }
      }
      .el-loading-spinner .path {
        animation: loading-dash 1.5s ease-in-out infinite;
        stroke-dasharray: 90,150;
        stroke-dashoffset: 0;
        stroke-width: 2;
        stroke: #C00019;
        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;
        }
      }
    </style>
  </head>
  <body>
    <div class="loading">
      <div class="el-loading-spinner">
        <svg viewBox="25 25 50 50" class="circular">
          <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
        </svg>
      </div>
    </div>
  
  </body>
</html>