锥形渐变与Loading效果实例页面

展示

代码

• HTML：

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

• CSS：

  .loading {
      width: 100px; height: 100px;
      border-radius: 50%;
      background: conic-gradient(deepskyblue, 30%, white);
      --mask: radial-gradient(closest-side, transparent 75%, black 76%);
      -webkit-mask-image: var(--mask);
      mask-image: var(--mask);
      animation: spin 1s linear infinite reverse;
  }
  @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
  }