css svg loading demo

本篇将记录一些 loading demo。

通过svg属性stroke-dashoffset 偏移和svg的差速旋转实现 loading

了解 stroke-dashoffset
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dashoffset

loading-1

效果

html

  <div class="loading-2">
    <svg class="l-svg" width="75" viewBox="0 0 150 150">
      <g>
        <circle
            class="l-circle"
            r="65"
            cx="75"
            cy="75"
            stroke-linecap="round"
            stroke-opacity="0.7"
        />
      </g>
    </svg>
  </div>

css

  .loading-2 {
    .l-svg {
      animation: loading2-svg linear 3s infinite;
      .l-circle {
        fill: transparent;
        stroke: #7c4dff;
        stroke-width: 10;
        stroke-dasharray: 300;
        stroke-dashoffset: 0;
        stroke-miterlimit: 10;
        animation: loading2-circle linear 2s infinite;
      }
    }

    @keyframes loading2-svg {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes loading2-circle {
      from {
        stroke-dashoffset: 0;
      }
      to {
        stroke-dashoffset: -600;
      }
    }
  }

loading-2

效果

通过伪类遮盖，修改旋转 origin 来达到此 loading

html

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

css

.loading-4 {
    position: relative;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background-color: rgba(78, 167, 249, 0.21);
    overflow: hidden;

    // 10px的"边框"
    &::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: 65px;
      height: 65px;
      border-radius: 50%;
      background-color: #fff;
    }

    // 转圈的矩形
    &::before {
      content: '';
      position: absolute;
      bottom: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      background-color: #00adb5;
      animation: loading4-rotate 1.5s linear infinite;
      transform-origin: bottom left;
    }

    @keyframes loading4-rotate {
      0% {
        transform: rotate(0deg);
      }
      50% {
        transform: rotate(180deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  }