【css】css实现加载动画

css:

        #loading2, #loading2::before, #loading2::after {
			  width: 0;
			  border-right: 1em solid #FFEFAF;
			  border-left: 0em solid #FFEFAF;
			  border-top: 0em solid transparent;
			  height: 2em;
			  display: block;
			  content: '';
			  position: absolute;
			  bottom: 0%;
			  background: transparent;
			}
			#loading2::before {
			  position: absolute;
			  left: -1.3em;
			  animation: loading2 3s infinite;
			}
			#loading2 {
			  animation: loading2 3s infinite 0.3s;
			}
			#loading2::after {
			  position: absolute;
			  left: 1.3em;
			  animation: loading2 3s infinite 0.6s;
			}
			
			@-moz-keyframes loading2 {
			  0%, 100% {
			    height: 2em;
			    width: 0;
			    border-left-width: 0;
			    border-right: 1em solid #FFEFAF;
			    border-top: 0em solid transparent;
			  }
			  30% {
			    height: 3em;
			  }
			  50% {
			    border-top: 0.5em solid transparent;
			  }
			  70% {
			    border-top-width: 0;
			  }
			}
			@-webkit-keyframes loading2 {
			  0%, 100% {
			    height: 2em;
			    width: 0;
			    border-left-width: 0;
			    border-right: 1em solid #FFEFAF;
			    border-top: 0em solid transparent;
			  }
			  30% {
			    height: 3em;
			  }
			  50% {
			    border-top: 0.5em solid transparent;
			  }
			  70% {
			    border-top-width: 0;
			  }
			}
			@keyframes loading2 {
			  0%, 100% {
			    height: 2em;
			    width: 0;
			    border-left-width: 0;
			    border-right: 1em solid #FFEFAF;
			    border-top: 0em solid transparent;
			  }
			  30% {
			    height: 3em;
			  }
			  50% {
			    border-top: 0.5em solid transparent;
			  }
			  70% {
			    border-top-width: 0;
			  }
			}

html:

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