利用css3做一个动态loading效果

如何利用css3做一个动态loading效果，下面web建站小编给大家简单介绍一下实现代码！

html代码：

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

css3代码：

body {
  margin:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:black;
}
.loader {
  width:20em;
  height:20em;
  font-size:10px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.loader .face {
  position:absolute;
  border-radius:50%;
  border-style:solid;
  animation:animate 3s linear infinite;
}
.loader .face:nth-child(1) {
  width:100%;
  height:100%;
  color:gold;
  border-color:currentColor transparent transparent currentColor;
  border-width:0.2em 0.2em 0em 0em;
  --deg:-45deg;
  animation-direction:normal;
}
.loader .face:nth-child(2) {
  width:70%;
  height:70%;
  color:lime;
  border-color:currentColor currentColor transparent transparent;
  border-width:0.2em 0em 0em 0.2em;
  --deg:-135deg;
  animation-direction:reverse;
}
.loader .face .circle {
  position:absolute;
  width:50%;
  height:0.1em;
  top:50%;
  left:50%;
  background-color:transparent;
  transform:rotate(var(--deg));
  transform-origin:left;
}
.loader .face .circle::before {
  position:absolute;
  top:-0.5em;
  right:-0.5em;
  content:'';
  width:1em;
  height:1em;
  background-color:currentColor;
  border-radius:50%;
  box-shadow:0 0 2em,0 0 4em,0 0 6em,0 0 8em,0 0 10em,0 0 0 0.5em rgba(255,255,0,0.1);
}
@keyframes animate {
  to {
    transform:rotate(1turn);
  }
}