四种纯CSS生成的加载Loading,封装组件可直接使用.支持更改颜色、大小、转圈速度

第一种实现效果及代码如下

.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(#0000, #1e4d92) content-box;
  mask: repeating-conic-gradient(
      #0000 0deg,
      #000 1deg calc(360deg / 10 - 10deg - 1deg),
      #0000 calc(360deg / 10 - 10deg) calc(360deg / 10)
    ),
    radial-gradient(
      farthest-side,
      #0000 calc(98% - 10px),
      #000 calc(100% - 10px)
    );
  mask-composite: intersect;
  -webkit-mask-composite: destination-in;
  animation: spin 1000ms infinite steps(10);
}
@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

第二种实现效果及代码如下

.loader {
  transform: scale(0.5);
  display: inline-block;
  height: 1em;
  width: 1em;
  line-height: 1;
  vertical-align: middle;
  border-radius: 1em;
  transition: all 150ms linear 0s;
  color: #1e4d92;
  box-shadow: 1.618033988747495em 1.1755705045882492em 0 -0.0875em,
    0.6180339887421291em 1.9021130325928304em 0 -0.0875em,
    -0.6180339887615437em 1.9021130325865223em 0 -0.0875em,
    -1.618033988759494em 1.1755705045717344em 0 -0.0875em,
    -2em -2.041364786902785e-11em 0 -0.0875em,
    -1.6180339887354962em -1.1755705046047644em 0 -0.0875em,
    -0.6180339887227141em -1.9021130325991387em 0 -0.0875em,
    0.6180339887809578em -1.9021130325802142em 0 -0.0875em,
    1.6180339887714932em -1.1755705045552187em 0 -0.0875em;
  animation: spinDots 1000ms infinite steps(10);
}
@keyframes spinDots {
  0% {
    transform: scale(0.5) rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    transform: scale(0.5) rotate(180deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    transform: scale(0.5) rotate(360deg);
  }
}

第三种实现效果及代码如下

.loader {
  width: 2.2em;
  height: 2.2em;
  display: block;
  position: relative;
  animation: spinRing 1500ms linear infinite;
}
.loader::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: auto;
  width: auto;
  border: 5px solid #1e4d92;
  border-radius: 50%;
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%);
  animation: spinRingInner 1500ms cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@keyframes spinRing {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spinRingInner {
  0% {
    transform: rotate(-180deg);
  }
  50% {
    transform: rotate(-160deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

第四种实现效果及代码如下

.loader {
  position: relative;
  display: block;
  height: 50px;
  width: 50px;
  transition: all 0.3s;
  transition-timing-function: ease-in;
  animation: spinHourglas 1000ms infinite;
}
.loader::after {
  content: "";
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  height: 100%;
  background: 0 0;
  border-width: 0.585em;
  border-color: #1e4d92 transparent;
  border-radius: 50%;
  border-style: solid;
}
@keyframes spinHourglas {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    transform: rotate(180deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    transform: rotate(360deg);
  }
}