CSS3s实现loading效果？

Question

这种的loading效果怎么实现，如下图：

希望能够实现上图中loading的效果

Answer 1

方案很多，一般来说 SVG 画最好。

不过我更推荐 spinkit 这个库，很多纯 CSS 的 loading spinner，可以按需选用。

Answer 2

看下用css实现的效果: https://codesandbox.io/p/sandbox/naughty-haze-x2r43w

Answer 3

可以参考以下

.spinner {
      width: 100px;
      height: 100px;
      background-image: url(./svg/spinner.svg);
    }

    .spinner .path {
      animation: loading-dash 1.5s ease-in-out infinite;
      stroke-dasharray: 90,150;
      stroke-dashoffset: 0;
      stroke-width: 2;
      stroke: #409eff;
      stroke-linecap: round;
    }

    .spinner .circular {
      animation: loading-rotate 2s linear infinite;
    }

    @keyframes loading-dash {
      0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0
      }

      50% {
        stroke-dasharray: 90,150;
        stroke-dashoffset: -40px
      }

      to {
        stroke-dasharray: 90,150;
        stroke-dashoffset: -120px
      }
    }

    @keyframes loading-rotate {
      to {
        transform: rotate(360deg)
      }
    }

<svg class="circular" viewBox="0 0 50 50"><circle class="path" cx="25" cy="25" r="20" fill="none"></circle></svg>

<div class="spinner">
      <svg class="circular" viewBox="0 0 50 50"><circle class="path" cx="25" cy="25" r="20" fill="none"></circle></svg>
    </div>

Answer 4

图的话随意，用svg还是png都行，就看能提供什么样的素材。当然完全仅靠CSS也可以实现。
然后就是使用 animation 属性和 @keyframes 去制作元素旋转动画了。

除了Meahill的提供的集合站，我这里有一个Loading效果的集合 CSS Loaders

Answer 5

<div class="loader"></div>

.loader {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #4277DF;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: loading 1s infinite linear;
}
@keyframes loading {to{transform: rotate(1turn)}}