loading样式

最新推荐文章于 2024-06-25 10:37:03 发布

weixin_43752765

最新推荐文章于 2024-06-25 10:37:03 发布

阅读量426

点赞数

分类专栏： IT前端学习心得记录

本文链接：https://blog.csdn.net/weixin_43752765/article/details/105117183

版权

IT前端学习心得记录专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果图：

在这里插入图片描述
1、菊花状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>
    .loading-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .loading-wrapper .spanner-box {
      width: 30px;
      height: 30px;
      position: relative;
      -webkit-animation: myspanner 0.8s linear infinite;
      animation: myspanner 0.8s linear infinite;
      animation-timing-function: steps(12);
    }

    .loading-wrapper .spanner {
      display: inline-block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      color: rgb(25, 137, 250);
    }

    .loading-wrapper .spanner::before {
      content: '';
      position: absolute;
      width: 2px;
      height: 22%;
      background-color: currentColor;
      border-radius: 40%;
      left: 0;
      right: 0;
      margin: auto;
    }

    .loading-wrapper .spanner-box .spanner:nth-of-type(1) {
      transform: rotate(30deg);
      opacity: 1;
    }

    .loading-wrapper .spanner-box .spanner:nth-of-type(2) {
      transform: rotate(60deg);
      opacity: 0.9375;
    }

    .loading-wrapper .spanner-box .spanner:nth-of-type(3) {
      transform: rotate(90deg);
      opacity: 0.875;
    }

    .loading-wrapper .spanner-box .spanner:nth-of-type(4) {
      transform: rotate(120deg);
      opacity: 0.8125;
    }

    .loading-wrapper .spanner-box .spanner:nth-of-type(5) {
      transform: rotate(150deg);
      opacity: 0.75;
    }

    .loading-wrapper .spanner-box .spanner:nth-of-type(6) {
      transform: rotate(180deg);
      opacity: 0.6875;
    }

    .loading-wrapper .spanner-box .spanner:nth-of-type(7) {
      transform: rotate(210deg);
      opacity: 0.625;
    }

    .loading-wrapper .spanner-box .spanner:nth-of-type(8) {
      transform: rotate(240deg);
      opacity: 0.5625;
    }

    .loading-wrapper .spanner-box .spanner:nth-of-type(9) {
      transform: rotate(270deg);
      opacity: 0.5;
    }

    .loading-wrapper .spanner-box .spanner:nth-of-type(10) {
      transform: rotate(300deg);
      opacity: 0.4375;
    }

    .loading-wrapper .spanner-box .spanner:nth-of-type(11) {
      transform: rotate(330deg);
      opacity: 0.375;
    }

    .loading-wrapperF .spanner-box .spanner:nth-of-type(12) {
      transform: rotate(360deg);
      opacity: 0.3125;
    }

    @keyframes myspanner {
      to {
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <div class="loading-wrapper">
    <div class="spanner-box">
      <span class="spanner"></span>
      <span class="spanner"></span>
      <span class="spanner"></span>
      <span class="spanner"></span>
      <span class="spanner"></span>
      <span class="spanner"></span>
      <span class="spanner"></span>
      <span class="spanner"></span>
      <span class="spanner"></span>
      <span class="spanner"></span>
      <span class="spanner"></span>
      <span class="spanner"></span>
    </div>
    <div class="text">加载中...</div>
  </div>
</body>

</html>

2、圆圈状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>
        .loading-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            color: rgb(224, 98, 98);
        }

        .loading-wrapper .spanner-box {
            width: 30px;
            height: 30px;
            animation: svgbox 2s linear infinite;
        }

        .loading-wrapper svg {
            width: 100%;
            height: 100%;
        }

        .loading-wrapper svg .circle {
            animation: loadingcircle 1.5s ease-in-out infinite;
        }

        @keyframes svgbox {
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes loadingcircle {
            0% {
                stroke-dasharray: 1, 160;
                stroke-dashoffset: 0;
            }

            50% {
                stroke-dasharray: 80, 160;
                stroke-dashoffset: -30;
            }

            100% {
                stroke-dasharray: 80, 160;
                stroke-dashoffset: -80;
            }
        }
    </style>
</head>

<body>
    <div class="loading-wrapper">
        <div class="spanner-box">
            <svg>
                <circle class="circle" fill="none" cx="15" cy="15" r="13" stroke="currentColor" stroke-width="2"
                    stroke-linecap='round'>
                </circle>
            </svg>
        </div>
        <div>加载中...</div>
    </div>
</body>

</html>