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);
      }
    }
  }