SOURCE

<p class="txt">
  原地址 : http://cssload.net/
</p>
<div class="loading">
  <i>
    <span>
    </span>
    <span>
    </span>
    <span>
    </span>
    <span>
    </span>
    <span>
    </span>
  </i>
</div>

html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

.txt {
  position: fixed;
  left: calc(50% - 100px);
  top: 10px;
  color: #fff;
  z-index: 99;
}

.loading {
  width: 100%;
  height: 100%;
  background: #4993e6;
  position: relative;
}

.loading i {
  margin: auto;
  position: absolute;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
  width: 80px;
  height: 80px;
  display: block;
  animation: loading 60s infinite;
}

.loading span {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: i 5s infinite;
}

.loading span:after {
  content: '';
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
}

.loading span:nth-child(1) {
  animation-delay: 0.2s;
}

.loading span:nth-child(2) {
  animation-delay: 0.4s;
}

.loading span:nth-child(3) {
  animation-delay: 0.6s;
}

.loading span:nth-child(4) {
  animation-delay: 0.8s;
}

.loading span:nth-child(5) {
  animation-delay: 1s;
}

@keyframes loading {
  form {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes i {
  0% {
    opacity: 1;
    transform: rotate(180deg);
    animation-timing-function: ease-out;
  }
  7% {
    opacity: 1;
    transform: rotate(300deg);
    animation-timing-function: linear;
  }
  30% {
    opacity: 1;
    transform: rotate(410deg);
    animation-timing-function: ease-in-out;
  }
  39% {
    opacity: 1;
    transform: rotate(645deg);
    animation-timing-function: linear;
  }
  70% {
    opacity: 1;
    transform: rotate(770deg);
    animation-timing-function: ease-out;
  }
  75% {
    opacity: 1;
    transform: rotate(900deg);
    animation-timing-function: ease-out;
  }
  76% {
    opacity: 0;
    transform: rotate(900deg);
  }
  100% {
    opacity: 0;
    transform: rotate(900deg);
  }
}