css加载动画

<div id="loading">
      <i></i>
    </div>

        #loading{
          display: block;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 999;
          background: #fff;
        }
        #loading i {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          width: 50px;
          height: 50px;
          border: 4px solid #000;
          border-right-color: transparent;
          border-radius: 50%;
          animation: loadingAnimation 0.8s infinite Linear;
          margin: auto;
        }
        @keyframes loadingAnimation {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }