纯css3个点加载动画

<style>
html,body {
    width: 100%;
    height: 100%;
}
body{
  background: black;
  font-family: 'Poppins', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  display: flex;
  justify-content: center;
  align-items: center;
}

/*css加载动画 begin*/
.sp {
	width: 24px;
	height: 24px;
	clear: both;
	margin: 0 auto;
}
.sp-3balls,
.sp-3balls:before,
.sp-3balls:after {
  border-radius: 50%;
  background-color: #999;
  width: 8px;
  height: 8px;
  transform-origin: center center;
  display: inline-block;
}
.sp-3balls {
  position: relative;
  background: rgba(225,225,225,1);
  animation: spScaleAlpha 1s infinite linear;

}
.sp-3balls::before,.sp-3balls::after {
  content: '';
  position: absolute;
  opacity: .25;
}
.sp-3balls:before {
	left: 12px;
	top: 0px;
	animation: spScaleAlphaBefore 1s infinite linear;
}
.sp-3balls::after {
  left: -12px;
  top: 0px;
  animation: spScaleAlphaAfter 1s infinite